我有一个看似简单的对齐问题，但似乎无法解决。我在 div 中有一个基本菜单。我想在菜单下方添加内容，所以我创建了另一个顶部边距为 10px 的 div。由于某种原因，它没有将内容识别为单独的内容，而是不断插入与菜单一致的内容。信息跨度类被放置在与菜单相同的级别。如果您发现这些部门的设置方式有问题，请告诉我!
CSS 代码在信息类的顶部只有 10px 的填充。
HTML 代码:
<body>
<div class="content">
<h1 class="title">HOME PAGE</h1>
<img src="pic.jpg" alt="Picture" style="padding:0px 0px 0px 45px"/>
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr"></span>
</span>
</a>
<div class="sdt_box">
<a href="#">EXAMPLE</a>
</div>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
<div class="sdt_box">
<a href="#">EXAMPLE</a>
</div>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr"></span>
</span>
</a>
<div class="sdt_box">
<a href="#">A</a>
</div>
</li>
</ul>
</div>
<div>
<span class="information">
<p>
Some content here
</p>
</span>
</div>
最佳答案
在没有看到您的 CSS 的情况下，这听起来像是一个 float 问题。您需要清除 float 元素。假设你做对了，它们很可能在 li 标签上。您可以在父级 ul 上使用 overflow:hidden:
ul#sdt_menu{
overflow: hidden;
}
或者你可以使用 cleafix 方法
ul#sdt_menu:after{
content: '';
display: block;
clear: both;
}
如果这些都不起作用，请发布您的 CSS 以获得进一步的帮助
关于html - 对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27878184/