您的位置：首页 > 其它

ul和ol在布局时的问题

2014-04-06 23:45 120 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 列表布局对齐 ul ol

相关文章推荐

新的分享

章节导航