ul 在 div 中未正确对齐
我在 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>
大话西游666浏览 146回答 3
3回答
-
一只萌萌小番薯
.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
这是项目符号/编号的默认行为 - 它们出现在正常段落流的左侧。要将它们与文本对齐，您需要自己完成。最简单的方法是使用li { margin-left: 1em }. -
呼啦一阵风
将显示内联块添加到您的类中，而不是浮动。.toc { display: inline-block; width:100px;}.content { display: inline-block; position:relative;}
随时随地看视频慕课网APP
相关分类
Html5