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

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 {

    text-align: left;

    font-size: 12pt;

    /*float: left;*/ /* delete this line */

    display: inline-table; /* change this to inline-table */

}

然后删除外部<ul>标签，如下完整代码所示：

完整代码：

CSS：

ul {

    text-align: left;

    font-size: 12pt;

    display: inline-table;

}

ul p {

    text-decoration: underline;

}

.section {

    border-radius: 10px;

    border: 2px solid black;

    margin: 5px;

} 

.section h1 {

    margin-left: 20px;

}

HTML：

<div class="section">

        <h1>My Abilities</h1> 

            <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>

    </div>

Answer 2

这只是您是否可以使用引导程序的另一种选择。

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;

} 

h1{

margin-left: 20px;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="content section">

    <div class="row">

        <h1>My Abilities</h1>

    </div>

    <div class="row">

        <div class="col-6">

            <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>

        </div>

        <div class="col-6">

            <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>

        </div>

    </div>

</div>