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

如何使我的列表项目使用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>‣ <a href="" class="a_top_hypers"> Inbox</a></li> <li>‣ <a href="" class="a_top_hypers"> Compose</a></li> <li>‣ <a href="" class="a_top_hypers"> Reports</a></li> <li>‣ <a href="" class="a_top_hypers"> Preferences</a></li> <li>‣ <a href="" class="a_top_hypers"> logout</a></li> </ul> </div> 

Answer 1

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

在你给的代码中，你需要使用上下文select器来使display: inline属性适用于列表项，而不是列表本身（应用display: inline到整个列表将不起作用）：

 #ul_top_hypers li { display: inline; } 

Answer 2

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

 #ul_top_hypers li { float: right; } 

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

Answer 3

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

Answer 4

正如@alex所说的，你可以把它浮起来，但是如果你想让标记保持不变，就把它浮到左边！

 #ul_top_hypers li { float: left; } 

Answer 5

它会为你工作：

 #ul_top_hypers li { display: inline-block; } 

Answer 6

正如其他人所说的，你可以设置li来display:inline; ，或左右float li 。 另外，你也可以使用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> 

Answer 7

这是很好，很简单的方式来显示你的清单项目漂亮的整齐的行和列

CSS

  .horizlist li{display:block; float:left; height:20px; width:130px;} 

HTML

  <ul class="horizlist"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> 

这里是一个什么样子的图片…

Answer 8

 #ul_top_hypers li { display: flex; }