如何顯示一個HTML列表

-1

海，我需要像這樣顯示在HTML 應該在2列格式如何顯示一個HTML列表

.Apple .Mango 
.Orange .Banana 
.Grapes

可以在任何一個提前

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

來源

2010-08-16 Sanjeev

這是一個CSS問題，而不是HTML問題。 HTML只是定義了列表，CSS定義了它的外觀。 – Skilldrick 2010-08-16 10:12:49

是不是這是一個問題的文檔而不是用於stackoverflow？ – fuz 2010-08-16 12:43:34

-2

你可以嘗試像

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

來源

2010-08-16 10:12:30 fuz

@FUZxxl：我剛纔試過這個，並且準備發佈我寫的代碼。 Nyway這是我正在查看的代碼。謝謝FUZxxl。 – Sanjeev 2010-08-16 10:15:37

誰投我的票？請解釋。 – fuz 2010-08-16 10:16:53

@FUZxxl：我沒有使用div標籤，因爲我不知道如何使用它。這段代碼對我來說真的很有幫助，它太簡單了。再次感謝FUZxxl – Sanjeev 2010-08-16 10:17:54

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

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

來源

2010-08-16 09:58:16

添加到您的樣式表：

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

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

來源

2010-08-16 10:15:25 Quentin

有兩種方法可以正確執行此操作。在任何一種情況下，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/

來源

2010-08-16 10:48:25

如何顯示一個HTML列表

回答

相關問題