gpt4 book ai didi

html - 对齐问题

转载 作者:行者123 更新时间:2023-11-28 08:39:31 25 4
gpt4 key购买 nike

我有一个看似简单的对齐问题,但似乎无法解决。我在 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com