如何并排放置两个被边框包围的元素？

Question

我有一个<div>元素，<ul>里面有两个元素。我想将它们并排放置，但是当我这样做时，<ul>元素出现在部分边框之外。我正在开发一个虚假的工作申请项目，出于某种原因展示一些能力（大多数我不具备）。我想让这两个元素出现在边框内。我是 CSS 新手，也不确定“子”或“兄弟”元素。

CSS：

ul {

    text-align: left;

    font-size: 12pt;

    float: left;

    display: inline;

}

ul p {

    text-decoration: underline;

}

.section {

    border-radius: 10px;

    border: 2px solid black;

    margin: 5px;

} 

HTML：

<div class="section">

  <h1>My Abilities</h1>

  <ul>

    <ul>

      <p>Hacking</p>

      <li>Disable Alarms</li>

      <li>Access Security Cameras</li>

      <li>Delay Camera and Alarm response time</li>

      <li>Disable Guard Pagers</li>

    </ul>

    <ul>

      <p>Gunmanship</p>

      <li>Able to handle any type of weapon, big or small</li>

      <li>Resourcefull with ammo</li>

      <li>Deadshot</li>

      <li>Can play many roles, from Heavy to Stealth</li>

      <li>Great Getaway driver</li>

      <li>Fast reloader with little recoil</li>

      <li>Excellent at training others</li>

      <li>Military grade training</li>

    </ul>

  </ul>

</div>

任何帮助表示赞赏！

Answer 1

只需对代码中的这两行进行以下更改：ul {&nbsp; &nbsp; text-align: left;&nbsp; &nbsp; font-size: 12pt;&nbsp; &nbsp; /*float: left;*/ /* delete this line */&nbsp; &nbsp; display: inline-table; /* change this to inline-table */}然后删除外部<ul>标签，如下完整代码所示：完整代码：CSS：ul {&nbsp; &nbsp; text-align: left;&nbsp; &nbsp; font-size: 12pt;&nbsp; &nbsp; display: inline-table;}ul p {&nbsp; &nbsp; text-decoration: underline;}.section {&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; border: 2px solid black;&nbsp; &nbsp; margin: 5px;}&nbsp;.section h1 {&nbsp; &nbsp; margin-left: 20px;}HTML：<div class="section">&nbsp; &nbsp; &nbsp; &nbsp; <h1>My Abilities</h1>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Hacking</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Disable Alarms</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Access Security Cameras</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Delay Camera and Alarm response time</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Disable Guard Pagers</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Gunmanship</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Able to handle any type of weapon, big or small</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Resourcefull with ammo</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Deadshot</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Can play many roles, from Heavy to Stealth</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Great Getaway driver</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Fast reloader with little recoil</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Excellent at training others</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Military grade training</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>

Answer 2

这只是您是否可以使用引导程序的另一种选择。ul {&nbsp; &nbsp; text-align: left;&nbsp; &nbsp; font-size: 12pt;&nbsp; &nbsp; float: left;&nbsp; &nbsp; display: inline;}ul p {&nbsp; &nbsp; text-decoration: underline;}.section {&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; border: 2px solid black;&nbsp; &nbsp; margin: 5px;}&nbsp;h1{margin-left: 20px;}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"><div class="content section">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <h1>My Abilities</h1>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-6">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Hacking</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Disable Alarms</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Access Security Cameras</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Delay Camera and Alarm response time</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Disable Guard Pagers</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-6">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Gunmanship</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Able to handle any type of weapon, big or small</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Resourcefull with ammo</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Deadshot</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Can play many roles, from Heavy to Stealth</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Great Getaway driver</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Fast reloader with little recoil</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Excellent at training others</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Military grade training</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>