如何将UL列表样式设置为一行

126

我想在单行中呈现此列表。

清单项目1
清单项目2

应该显示为

*列出项目2 *列出项目2

使用什么CSS样式？

css

— RD
source

我知道这个问题并非专门针对引导程序，但我发现引导程序缩略图对于文本，图像，视频等的水平列表非常有用

— 。– Anupam

183

ul li{
  display: inline;
}

有关更多信息，请参见listamatic 的基本列表选项和基本水平列表。（感谢下面的Daniel Straight提供的链接）。

另外，如评论中所指出的那样，您可能希望对ul以及li和li自身内部包含的任何元素进行样式化，以使外观看起来更好。

— rz。
source

7

在完成这项工作的同时，您还需要添加一些填充以使元素之间保持良好的间距

— Rob Allen 2009年

1

正确，这只会使列表水平。您可能想为ul，li和li中的所有内容添加更多样式，以使外观看起来更好。

— rz。

1

如何让子弹留下？还是我们可以通过其他方式使用项目符号。

— RD

1

正如@DotDot指出的那样：使用{display：inline}可以删除项目符号样式。解决此问题的方法是：1.改用{float：left}（尽管不适用于IE9）。2.添加左填充并添加背景图像（将项目符号作为背景图像）。

— Adrien Be

26

在现代浏览器中，您可以执行以下操作（符合CSS3）

ul
{
  display:flex;  
  list-style:none;
}

<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>

展开摘要

— davidlbaileysr
source

15

HTML代码：

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS代码：

ul.list li{
  width: auto;
  float: left;
}

— 阿德尔·阿吉
source

9

尝试尝试类似这样的方法：

的HTML

 <ul class="inlineList">
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

的CSS

 .inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

我做了一个代码笔来说明：http ://codepen.io/agm1984/pen/mOxaEM

— agm1984
source

0

在引导中使用.list-inlinecss类

<ul class="list-inline">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

参考：https : //www.w3schools.com/bootstrap/tryit.asp? filename = trybs_ref_txt_list-inline & stacked =h

— 马蒂·戈伊拉（Matee Gojra）
source