如何在水平行中显示<ul>

106

如何使用CSS使列表项连续水平显示？

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

展开摘要

html css html-lists

— 巴比克
source

好问题。我认为这里的重点实际上是如何与最新的Web标准保持一致

— -Andy

132

列表项通常是块元素。通过display属性将它们变成内联元素。

在给出的代码中，您需要使用上下文选择器使该display: inline属性应用于列表项，而不是列表本身（应用于display: inline整个列表将无效）：

#ul_top_hypers li {
    display: inline;
}

这是工作示例：

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers li{
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

展开摘要

— 体重
source

2

我还通过使用float达到了这种效果，从而保持了列表项的块性质。

— 乔尔

1

我不得不说，这是一种有趣的方法-但是，我认为这会带来一些不必要的麻烦，例如边距，因为您实际上是在将列表项从包装箱模型中取出来。

— hbw

1

@htw：您可以使用任何clearfix解决方案使其恢复运行。

— 亚历克斯

2

如果您想保留块的性质，可以始终使用display：inline-block……尽管在此阶段尚不完全支持它（我相信主要是Fx2）。

— 詹姆斯·B

17

您也可以将它们设置为向右浮动。

#ul_top_hypers li {
    float: right;
}

这使它们仍然处于块级，但将出现在同一行上。

— 亚历克斯
source

1

向右浮动它们会产生额外的影响：它将交换它们的顺序，因此从左到右它们将是倒数第一。

— 马修·詹姆斯·泰勒

嗯，是的，它们需要在标记中反转（以至于布局/标记分离如此之多！）

— alex

11

将display属性设置inline为要应用到的列表。在A List Apart上显示列表有很好的解释。

— 保罗·莫里
source

8

正如@alex所说，您可以向右浮动它，但是如果您想保持标记不变，则将其向左浮动！

#ul_top_hypers li {
    float: left;
}

— 霍纳
source

7

它将为您工作：

#ul_top_hypers li {
    display: inline-block;
}

— 维克拉姆·莫霍德
source

4

正如其他人提到的，您可以将设置li为display:inline;，或者float将其设置为lileft或right。此外，您也可以display:flex;在上使用ul。在下面的代码段中，我还添加justify-content:space-around了更多的空格。

有关flexbox的更多信息，请查阅此完整指南。

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

展开摘要

— 马修·约翰逊（Matthew Johnson）
source

3

#ul_top_hypers li {
  display: flex;
}

— 库马尔·萨凯特
source