ul或ol如何对齐,调整位置?




很多人在使用列表做菜单时,常常在布局时发现位置错位,对不齐等等问题。

究其根本,大多由于在ul和ol在布局时忘了“padding: 0px 0px;margin: 0px 0px;”

这两句代码的书写。


首先来看下没加这两行代码有什么效果;

ul和ol在布局时的问题_ol

我们可以看到,列表默认的padding-left并非是0px,同时,默认的margin-top也不是0px。

其实细想下列表本身对自己格式的要求,便不难明白为什么会设置成这样。

所以在布局调整格式时,注意添上“padding: 0px 0px;margin: 0px 0px;”这两句代码。



下面是添加后的效果:

   ul和ol在布局时的问题_列表_02



最后附测试代码:

<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>