如何在一條線上對齊所有的li？

我的CSS如何在一條線上對齊所有的li？

ul{ 
overflow:hidden; 
} 
li{ 
display:inline-block; 
}

我的HTML

<ul> 
<li>a</li> 
<li>b</li> 
<li>c</li> 
<li>d</li> 
<li>e</li> 
<li>f</li> 
<li>g</li> 
</ul>

我要對齊在一行中我的所有鋰項目，如果我這樣做，一切工作只是罰款，當3個或4裏的填充第一線在我的身上，他們走第二條線，我想他們是在1號線和一切的1號線充滿後會被「隱藏」

FOR EXAMPLE ::

//注意李持有的句子不只是1個字母

現在輸出::

a    b    c    d 
     e     f    g

所需的輸出::

a     b    c    d   e  f //all of them in 1 line and the rest of them are hidden 'overflow:hidden'

來源

2010-02-24 trrrrrrm

嘗試把white-space:nowrap;在<ul>風格

編輯：並使用「內聯」而不是像其他人指出的那樣（並且我忘記了）

來源

2010-02-24 12:35:38 Ray

這是你想要的。在這種情況下，您不希望將列表項視爲可以換行的塊。

li{display:inline} 
ul{overflow:hidden}

來源

2010-02-24 12:36:36

如果預期的效果是有滾動條，看林的休息，'overflow'應該是'auto' - 'hidden'將禁行關閉，其餘部分不會在屏幕上看到。 – casraf 2010-02-24 13:10:43

這工作，你想：

<html> 
<head> 
    <style type="text/css"> 

ul 
{ 
overflow-x:hidden; 
white-space:nowrap; 
height: 1em; 
width: 100%; 
} 

li 
{ 
display:inline; 
}  
    </style> 
</head> 
<body> 

<ul> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
</ul> 

</body> 
</html>

來源

2010-02-24 12:37:35 cjk

+1，我測試了上面的代碼片段。它按預期工作：> http://jsbin.com/acaxo3/edit – 2010-02-24 12:41:16

我覺得NOBR標籤可能是矯枉過正，正如你所說的，不可靠。

根據您如何顯示文本，有2個選項可用。

如果您在表格單元格中顯示文字，您可以在此處輸入長文字。如果您使用div或跨度，則可以使用style =「white-space：nowrap;」

來源

2012-02-14 08:15:10

使用顯示：表

HTML：

<ul class="my-row"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
</ul>

CSS：

ul.my-row { 
    display: table; 
    width: 100%; 
    text-align: center; 
} 

ul.my-row > li { 
    display: table-cell; 
}

SCSS：

ul { 
    &.my-row { 
    display: table; 
    width: 100%; 
    text-align: center; 

    > li { 
     display: table-cell; 
    } 
    } 
}

工作非常適合我

來源

2015-10-13 13:49:57 naorz

我會推薦：

<style> 
    .clearfix { 
     *zoom: 1; 
    } 
    .clearfix:before, 
    .clearfix:after { 
     content: " "; 
     display: table; 
    } 
    .clearfix:after { 
     clear: both; 
    } 
    ul.list { 
     list-style: none; 
    } 
    ul.list li { 
     display: inline-block; 
    } 
</style> 

<ul class="list clearfix"> 
    <li>li-one</li> 
    <li>li-two</li> 
    <li>li-three</li> 
    <li>li-four</li> 
</ul>

來源

2016-08-29 10:33:28

你可以給你的答案補充一些補充嗎？簡單地顯示代碼可能會讓一些人感到困惑。 – 2016-08-29 10:51:37

如何在一條線上對齊所有的li？

回答

相關問題