Question

我正在尝试构建一个简单的水平列表，其中每个列表项都是div，我希望它们全部彼此相邻。当我尝试使用下面的代码时，div最终会分开。这就是我所拥有的：

HTML：

<ul id="navlist">
<li><div>...</div></li>
<li><div>...</div></li>
<li><div>...</div></li>
</ul>

CSS：

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

我试图给我的div一个最大宽度和宽度，但这也不起作用。基本上，它们在不同的线条上显示没有子弹点。

非常感谢帮助解决这个问题，谢谢！

Answer 1

#navlist li { display:inline }
#navlist div { display:inline }

将<li>作为块放在<div>内联是你的问题。

或者，如果您要控制尺寸或边距，则inline-block可能需要<li>。

您可能也对此演示感兴趣：http://phrogz.net/JS/ul2menu/purecss_testsuite.html

我不确定为什么<div>内有<li>，但我认为你有理由。

Answer 2

CSS

* {
    margin: 0;
    padding: 0;
}
ul {
    background: #48D;
    height: 35px;
    line-height: 25px;
    width: 300px;
}
li {
    float: left;
    list-style-type: none;
    margin: 5px 0 0 5px;
}
li div {
    background: #6AF;
    padding: 0 5px;
}

HTML

<ul>
    <li><div>Text</div></li>
    <li><div>Text</div></li>
    <li><div>Text</div></li>
</ul>

Answer 3

默认情况下，列表项中的每个div都显示为一个块。也可以内联显示它们，它应该可以工作。

#navlist div, #navlist li
{
  display: inline;
}
#navlist li
{
  list-style-type: none;
  padding-right: 20px;
}

Answer 4

在列表项上尝试float: left;，可能是这样的：

#navlist li
{
float: left;
list-style-type: none;
padding-right: 20px;
}

此外，请确保指定ul的高度，因为元素将离开流，这意味着ul将没有任何高度。您还可以使用clearfix来解决此问题：

.clear:after
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clear
{
    display: inline-block;
}

html[xmlns] .clear
{
    display: block;
}

* html .clear
{
    height: 1%;
}

您只需将class="clear"添加到<ul>即可。 Google clearfix css更多信息：）

带有div的HTML / CSS中的水平（内联）列表

4 个答案: