我有一个<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>任何帮助表示赞赏！
2 回答
慕森王
TA贡献1777条经验 获得超3个赞
只需对代码中的这两行进行以下更改：
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>
小怪兽爱吃肉
TA贡献1852条经验 获得超1个赞
这只是您是否可以使用引导程序的另一种选择。
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>
- 2 回答
- 0 关注
- 58 浏览
添加回答
举报
0/150
提交
取消