我是CSS新手并使用list.我尝试使用我在w3schools上看到的代码之一,它显示了如何缩进列表:
<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覆盖了它,所以它在同一垂直线上.我可以在列表上本地使用任何CSS代码来覆盖主css文件吗？任何帮助,将不胜感激.
Mad*_*iha 18
是的,只需使用以下内容:
ul {
padding-left: 10px;
}
它会使每个连续ul10个像素.
Jas*_*aro 13
听起来有些样式正在被重置.
默认情况下,在大多数浏览器中,uls和ols已经添加margin并padding添加到它们中.
您可以通过在css中添加一行来覆盖此(以及许多)
ul, ol { //THERE MAY BE OTHER ELEMENTS IN THE LIST
margin:0;
padding:0;
}
在这种情况下,您将从此列表中删除元素或添加margin/ paddingback,如此
ul{
margin:1em;
}
示例:http://jsfiddle.net/jasongennaro/vbMbQ/1/
我通过向嵌套列表添加text-indent解决了同样的问题.
<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;
}