我有一個(gè)<div>元素，<ul>里面有兩個(gè)元素。我想將它們并排放置，但是當(dāng)我這樣做時(shí)，<ul>元素出現(xiàn)在部分邊框之外。我正在開(kāi)發(fā)一個(gè)虛假的工作申請(qǐng)項(xiàng)目，出于某種原因展示一些能力（大多數(shù)我不具備）。我想讓這兩個(gè)元素出現(xiàn)在邊框內(nèi)。我是 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貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超3個(gè)贊
只需對(duì)代碼中的這兩行進(jìn)行以下更改：
ul {
text-align: left;
font-size: 12pt;
/*float: left;*/ /* delete this line */
display: inline-table; /* change this to inline-table */
}
然后刪除外部<ul>標(biāo)簽，如下完整代碼所示：
完整代碼：
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>
小怪獸愛(ài)吃肉
TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超1個(gè)贊
這只是您是否可以使用引導(dǎo)程序的另一種選擇。
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 關(guān)注
- 171 瀏覽
添加回答
舉報(bào)
0/150
提交
取消