無效的HTML標記

<ul> 
    <li>Text</li><br> 
    <li>Text</li><br> 
</ul>

我想要什麼，每個li元素後換行一個HTML代碼，可使用此代碼來實現。但問題是，當我到W3C進行html5驗證時，它顯示錯誤元素br不允許作爲元素ul的子元素在此上下文中。

所以我明白br不能用作ul的子元素。我想知道的是，有沒有其他方法可以得到與上述相同的結果？如果可以在CSS中完成，我可以。

在此先感謝。

2013-08-20 lichborne

除去休息會導致相同的行爲。列表通常以新行顯示。 – palerdot

@lichborne您正在使用'
'在html中生成一個空行，這不是一個好習慣，請嘗試在列表項上設置一個「margin-bottom」而不是 – Valentin

此CSS僅適用於Firefox。在鉻中它根本沒有效果。 – lichborne

默認情況下，<li>元素是display: list-item這將導致他們生成一個塊框，所以你會在他們之後得到一個休息。將display屬性重新設置爲list-item以還原它們。

如果實際上表示您想要一個保證金，而不是簡單的換行符，那麼請使用CSS margin屬性來設置一個。

2013-08-20 07:25:01 Quentin

margin-bottom css確實解決了我的問題，但僅限於Firefox。在Chrome瀏覽器中，它沒有任何效果 – lichborne

[正常運行]（http://jsbin.com/AdowIC/1/edit?html,output）。 – Quentin

我再次嘗試，它只是拒絕在谷歌Chrome中工作 – lichborne

HTML

<ul> 
    <li class="one">Text</li> 
    <li class="one">Text</li> 
</ul>

CSS

<style> 
     .one 
     { 
      line-height: 40px; 
     } 
</style>

2013-08-20 07:27:10 Sasidharan

可以使用保證金鈕在CSS

ul li { 
    margin-bottom: 20px; // As per your requirement 
}

2013-08-20 07:28:55

如果使用多個ul li，則相同的css將應用於所有。 – Sasidharan

這是一個示例，只是爲了表示使用它的方式。應根據應用的要求對其進行修改。 –

這個CSS只在firefox中工作。在鉻中它根本沒有效果。 – lichborne

回答