ul或ol如何对齐,调整位置?
很多人在使用列表做菜单时,常常在布局时发现位置错位,对不齐等等问题。
究其根本,大多由于在ul和ol在布局时忘了“padding: 0px 0px;margin: 0px 0px;”
这两句代码的书写。
首先来看下没加这两行代码有什么效果;
我们可以看到,列表默认的padding-left并非是0px,同时,默认的margin-top也不是0px。
其实细想下列表本身对自己格式的要求,便不难明白为什么会设置成这样。
所以在布局调整格式时,注意添上“padding: 0px 0px;margin: 0px 0px;”这两句代码。
下面是添加后的效果:
最后附测试代码:
<html>
<head>
<title></title>
<style>
#left{
width: 150px;
min-height:300px;
border:1px black dashed;
}
ul{
list-style: none;
padding: 0px 0px;
margin: 0px 0px;
border:1px red dashed;
}
li{
color: black;
text-align: center;
width: 150px;
height: 33px;
padding:5px 0px 0px 0px;
border:1px blue dashed;
}
</style>
</head>
<body>
<div id="left">
<ul id="duiqi">
<li><a href="#">资料管理</a></li>
<li><a href="#">学校管理</a></li>
<li><a href="#">用户管理</a></li>
<li><a href="#">统计信息</a></li>
</ul>
</div>
</body>
</html>