119

如何使用 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>

4

8 回答 8

156

列表项通常是块元素。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>

于 2009-05-20T00:37:55.020 回答
19

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

#ul_top_hypers li {
    float: right;
}

这允许它们仍然是块级别，但会出现在同一行。

于 2009-05-20T01:01:20.777 回答
11

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

于 2009-05-20T00:40:27.540 回答
9

正如@alex 所说，您可以将其浮动到右侧，但如果您想保持标记不变，请将其浮动到左侧！

#ul_top_hypers li {
    float: left;
}
于 2013-06-18T14:41:55.420 回答
9

正如其他人所提到的，您可以将 设置为li，display:inline;或者向左或向右。此外，您还可以在. 在下面的片段中，我还添加了更多间距。floatlidisplay:flex;uljustify-content:space-around

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

#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>

于 2016-09-02T19:23:33.200 回答
8

它会为你工作：

#ul_top_hypers li {
    display: inline-block;
}
于 2016-10-21T12:11:44.470 回答
5 
#ul_top_hypers li {
  display: flex;
}
于 2017-06-14T05:42:41.930 回答
0

如果您想在不影响列表样式的情况下水平对齐列表项（li），请使用下面提到的属性。 ul{ display:flex; gap:30px; } gap:30px 这用于设置列表项之间的间隙。

于 2022-02-27T17:23:13.623 回答