我在 div 旁邊有一個導航。導航向左浮動。然后我在div中有一個ul。ul 的所有項目符號都位于左側，位于導航部分。li 項目的文本與段落文本對齊，而不是項目符號與段落文本對齊。如何使 ul 像平常一樣對齊？.toc {float:left;width:100px;}.content {position:relative;}<nav class="toc"><ol> <li>section 1 <li>section 2 <li>section 3 <li>section 4 <li>section 5 </ol> </nav><div class="content"><p>Text text text text text text text text text text text text text text text text text text text text text.<ul> <li>item 1 <li>item 1 <li>item 1 </ul></div>
3 回答
一只萌萌小番薯
TA貢獻1795條經驗 獲得超7個贊
.toc {
display: inline-block;
width:100px;
}
.content {
display: inline-block;
position:relative;
}
p{
margin-left:20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<nav class="toc">
<ol>
<li>section 1
<li>section 2
<li>section 3
<li>section 4
<li>section 5
</ol>
</nav>
<div class="content">
<p>Text text text text text text text text text text text text text text text text text text text text text.</p>
<ul>
<li>item 1
<li>item 1
<li>item 1
</ul>
</div>
</body>
</html>
慕田峪9158850
TA貢獻1794條經驗 獲得超7個贊
這是項目符號/編號的默認行為 - 它們出現在正常段落流的左側。要將它們與文本對齊，您需要自己完成。最簡單的方法是使用li { margin-left: 1em }.
呼啦一陣風
TA貢獻1802條經驗 獲得超6個贊
將顯示內聯塊添加到您的類中，而不是浮動。
.toc {
display: inline-block;
width:100px;
}
.content {
display: inline-block;
position:relative;
}
- 3 回答
- 0 關注
- 233 瀏覽
添加回答
舉報
0/150
提交
取消