CSS 定位 - 无序列表

Question

我想将无序列表的元素放置在菜单标题的左侧(水平显示，而不是垂直显示)。例如，您可以看到主页、HTML 等:

如何使用 CSS 实现这种效果？

Answer 1

float

ul
{
    margin: 0;
    list-style-type: none;
}
ul li
{
    margin: 0;
    list-style-type: none;
    float: left;
}
ul li a
{
    display: block;
}

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">...</a></li>
</ul>

要获得像图像中那样的列表，您需要有两组 UL然后应用 float: left;左边一个和一个float: right;向右。

对于 float ，您必须清除它们，以避免以后“破坏”您的设计。您可以通过添加 <br style="clear: both;" /> 来做到这一点在列表下方。您还可以将该样式添加到下一个 div。