我在 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 关注
- 145 浏览
添加回答
举报
0/150
提交
取消