無序列表的列

我想使用無序列表欄目的東西設置類似如下：無序列表的列

<ul> 
<li>word 1</li> 
<li>word 1</li> 
<li>word 1</li> 
<li>word 1</li> 
<li>word 1</li> 
</ul> 
<ul> 
<li>word 2</li> 
<li>word 2</li> 
<li>word 2</li> 
<li>word 2</li> 
<li>word 2</li> 
</ul>

什麼會，我需要用無副作用垂直列表儘可能CSS這些做陣容側子彈。我確信我錯過了一些簡單的東西，但我似乎無法弄清楚。我特別需要這個在IE7中工作。

由於提前，本

來源

2010-03-17 Ben

這裏是真正的答案很簡單：

ul { 
    float: left; 
    list-style-type: none; 
}

這裏的稍微長一點的解釋：

的float部分告訴你的名單一起移動「在同一條線上「。您也可以將width屬性添加到ul元素中，以便獲得均勻分佈的列。
list-style-type屬性只是關閉你的子彈。最有可能的是，你現在有空的空間，子彈曾經是。這可以通過覆蓋maring和padding刪除 - 例如。將它們都設爲零。

您可能還想在列表後的任何元素上添加clear: left屬性。

來源

2010-03-17 18:40:40

'列表型style'是我從來沒見過的，是它'列表樣式類型的代名詞'或錯字？ –

@ ricebowl：那會是我累了的結果。現在已經修復了。感謝您指出:) –

啊，咖啡因下溢錯誤。 =） –

<div class="wrapper"> 
<ul> 
<li>word 1</li> 
<li>word 1</li> 
<li>word 1</li> 
<li>word 1</li> 
<li>word 1</li> 
</ul> 
<ul> 
<li>word 2</li> 
<li>word 2</li> 
<li>word 2</li> 
<li>word 2</li> 
<li>word 2</li> 
</ul> 
<div class="clear"></div> 
</div> 

<style type="text/css"> 
ul {width: 40%; float: left;list-style-type: none;} 
ul li {list-style-type: none;} 
.clear {clear:both;font-size:0px;line-height:0px;height:0px;} 
</style>

沿着這些線路的東西......記住，這看起來相當多的「標準」的瀏覽器之間，如果你有一個體面的CSS復位塊。我推薦藍圖。

來源

2010-03-17 18:42:13

下面是一個例子：

<div id="menucontainer"> 
    <ul> 
    <li>w1</li> 
    <li>w2</li> 
    </ul> 
</div>

的CSS：

#menucontainer ul { 
    list-style-type: none; 
} 

#menucontainer ul li { 
    display: inline; 
    padding: 0.1em; 
}

來源

2010-03-17 18:44:35 Carra

無序列表的列

回答

相關問題