CSS定位 - 无序列表

Question

我想在菜单标题的左侧放置一个无序的项目列表（水平显示，而不是垂直显示）。例如，您可以看到Home，HTML等：

如何使用CSS实现此效果？

Answer 1

浮筒

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;应用于右侧

对于花车，您必须清除它们以避免以后“破坏”您的设计。您可以在列表下方添加<br style="clear: both;" />来执行此操作。您也可以将该样式添加到下一个div。

Answer 2

.menu{
text-align:left;
}
.menu ul{
margin:0px;
padding:0px;
}
.menu ul li{
display:inline;
margin:0px;
padding:0px 10px 0px 10px;
text-align:center;
}


<div class="menu">
   <ul>
       <li><a href="#">Menu1</a></li>
       <li><a href="#">Menu2</a></li>
       <li><a href="#">Menu3</a></li>
   </ul>
</div>