首页 > 其他 > 详细

ul和ol在布局时的问题

时间:2014-04-07 00:37:51      阅读:415      评论:0      收藏:0      [点我收藏+]

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




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

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

这两句代码的书写。


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

bubuko.com,布布扣

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

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

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



下面是添加后的效果:

   bubuko.com,布布扣



最后附测试代码:

<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在布局时的问题,布布扣,bubuko.com

ul和ol在布局时的问题

原文:http://taid11.blog.51cto.com/7553502/1391361

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!