如何將UL列表樣式，一條線路

Question

我想使這個列表中一行。

• 清單物品1
• 列表ITEM2

應顯示爲

*名單ITEM2 *名單ITEM2

用什麼CSS樣式？

Answer 1

ul li{ 
    display: inline; 
} 

欲瞭解更多信息，請參閱basic list options和a basic horizontal list at listamatic。 （感謝下面鏈接的Daniel Straight）。

此外，作爲在評論中指出的那樣，你可能想在UL造型和任何元素裏面去了李的和李的自己把事情看起來不錯。

Answer 2

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; 
} 

Answer 3

在現代瀏覽器中，你可以做以下（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 4

顯示的任何原因：內聯不起作用？我的造型工作起來，我不是初學者，而是顯示：當其他事情做某事時，內聯什麼都不做。我甚至刪除了其他一切，只是爲了確保沒有任何影響它，但不管是什麼，都不起作用...

其實，上面貼着display：flex的紳士是什麼工作的...這很奇怪。 ..

Answer 5

嘗試這樣的事情也嘗試：

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; 
} 
*/ 

我做了一個codepen來說明：http://codepen.io/agm1984/pen/mOxaEM