Question

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

列出item1
列出项目2

应显示为

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

使用什么CSS样式？

Answer 1

ul li{
  display: inline;
}

有关详情，请参阅listamatic的basic list options和a basic horizontal list。（感谢下面的Daniel Straight链接）。

另外，正如评论中指出的那样，你可能想要在ul上设置样式，并且在li和li本身里面放置任何元素以使事情变得美观。

Answer 2

在现代浏览器中，您可以执行以下操作（符合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>

Answer 3

HTML code：

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

CSS代码：

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

Answer 4

尝试尝试这样的事情：

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

Answer 5

在引导程序中，使用.list-inline CSS类

<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

Answer 6

显示的任何原因：内联不起作用？我已经有了造型工作，而且我根本不是初学者，只是显示：当其他事情做某事时，内联不会做任何事情。我甚至删除了其他所有内容，只是为了确保没有任何影响它，但无论如何，都不起作用......

实际上，上面贴着display：flex的绅士是有用的......那很奇怪......

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

6 个答案: