如何顯示一個HTML列表

Question

海， 我需要像這樣顯示在HTML 應該在2列格式

.Apple .Mango 
.Orange .Banana 
.Grapes 

可以在任何一個提前

發佈一些示例代碼或網址 謝謝

Answer 1

你可以嘗試像

<div style="float:left"> 
<ul> 
    <li>List</li> 
    <li>one</li> 
</ul> 
</div> 
<div style="float:left"> 
<ul> 
    <li>List</li> 
    <li>two</li> 
</ul> 
</div> 

請注意，使用表格來設置網頁格式非常不鼓勵。 （這就是爲什麼我removad該節中的原因），這真是最好使用<div>和<span>

Answer 2

採取這裏看看......

http://www.w3.org/TR/html401/struct/lists.html

Answer 3

添加到您的樣式表：

li { 
    width: 50%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    float: left; 
} 

你可能會想調整它，但是，使一個合理的起點。

Answer 4

有兩種方法可以正確執行此操作。在任何一種情況下，HTML都將保持不變：

<ul class="two-col"> 
    <li>Apple</li> 
    <li>Mango</li> 
    <li>Orange</li> 
    <li>Banana</li> 
</ul> 

現在用於CSS。首先，你可以使用float S：

.two-col { 
    overflow: hidden; 
} 

.two-col li { 
    width: 130px; /* Change this to any amount you want */ 
    margin-right: 10px; 
    float: left; 
} 

或者您可以使用新的CSS3列屬性（注意是不支持IE8及以下）：

.two-col { 
    column-count: 2; 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
} 

這會自動給每個列的原始寬度的一半。在這裏撥動它：http://www.jsfiddle.net/4jLK7/