HTML和CSS中的縮進列表

我是新來的CSS和使用列表。我試圖用我的W3Schools的看到代碼顯示瞭如何縮進列表之一：HTML和CSS中的縮進列表

<html> 
<body> 

<h4>A nested List:</h4> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul> 
    <li>Black tea</li> 
    <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul> 

</body> 
</html>

我的CSS是壓倒它，因此它所有apears在同一垂直線上。有沒有我可以在列表本地使用的任何CSS代碼來覆蓋主要的CSS文件？任何幫助，將不勝感激。

來源

2011-08-08 Alan

但我沒有看到你的CSS ... – BoltClock

@BoltClock：根據他的問題規範，我認爲他的意思是詢問如何在本地覆蓋主要的CSS。在那種情況下，他的主要CSS是不相關的，但如果不是這樣的話，那麼是的。 –

是，只需使用類似：

ul { 
    padding-left: 10px; 
}

它將撞擊每個連續ul 10個像素。

Working jsFiddle

來源

2011-08-08 17:08:39

通常情況下，正在顯示所有列表垂直反正。那麼你想要水平顯示它嗎？

無論如何，你要求覆蓋主要的css文件並在本地設置一些css。你不能在<ul>與style=""之內這樣做，它適用於兒童（<li>）。

最接近本地操縱你的名單將是：

<style> 
    li {display: inline-block;} 
</style> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul> 
     <li>Black tea</li> 
     <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul>

來源

2011-08-08 17:20:17

我非常懷疑他想要查看水平項目，因爲他詢問了縮進列表。 –

相同，但它的意思是作爲本地CSS的一個例子。我非常懷疑，他想設置填充左：10px;太..？ –

這聽起來像你的一些樣式被重置。

默認情況下，在大多數瀏覽器中，ul s和ol s已將margin和padding添加到它們中。

可以通過添加一行你的CSS像這樣

ul, ol { //THERE MAY BE OTHER ELEMENTS IN THE LIST 
    margin:0; 
    padding:0; 
}

在這種情況下，覆蓋此（和許多做），你會從這個名單中刪除元素或添加margin/padding回來，像所以

ul{ 
    margin:1em; 
}

例子：http://jsfiddle.net/jasongennaro/vbMbQ/1/

來源

2011-08-08 17:28:47

我通過添加文本縮進到嵌套列表解決同樣的問題。

<h4>A nested List:</h4> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul id="list2"> 
    <li>Black tea</li> 
    <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul> 

#list2 
{ 
text-indent:50px; 
}

來源

2012-10-21 07:54:32

更好的解決方案是避免在標記中使用id或class，並嚴格使用css。保證金或填充是一個更好的選擇。 – Octopus

您可以使用[相鄰的兄弟組合子]作爲W3 CSS選擇建議書中所描述1 所以，你可以使用一個+符號（或者甚至是~波浪號）申請填充到嵌套ul標籤，因爲你在你的問題中描述，你會得到你需要的結果。我也認爲你想要它在本地覆蓋主要的CSS。你可以這樣做：

<style> 
    li+ul {padding-left: 20px;} 
</style>

這樣內ul將嵌套包括li元素的子彈。我希望這是有幫助的！ =）

來源

2014-02-13 18:17:49 Metafaniel

HTML和CSS中的縮進列表

回答

相關問題