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中的缩进列表

回答

相关问题