ul 在 div 中没有正确对齐
[英]ul not aligning properly in 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>
3 个解决方案
解决方案1
1 2020-04-20 08:40:05
.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>
解决方案2
0 2020-04-20 07:41:14
这是项目符号/编号的默认行为 - 它们出现在正常段落流的左侧。 要将它们与您需要自己做的文本对齐。 最简单的方法是使用li { margin-left: 1em } 。
解决方案3
0 2020-04-20 07:45:50
而不是浮动添加显示内联块到您的类。
.toc {
display: inline-block;
width:100px;
}
.content {
display: inline-block;
position:relative;
}
在DIV中对齐水平UL菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.