ul无序列表常见问题总结

最新推荐文章于 2024-04-19 12:54:59 发布

weixin_30701521

最新推荐文章于 2024-04-19 12:54:59 发布

阅读量384

点赞数

原文链接：http://www.cnblogs.com/my_front_research/articles/1895444.html

版权

2010年06月01日 10:50

1.未清除的margin和padding引发的布局错位；

2.ie6,7,8下的浮动空白错位，解决办法是给li添加行高属性；代码如下：

a{white-space:nowrap;}
</style>
</head>
<body>
<ul>
    <li><a href="#nogo">国际财务管理师！</a></li>
    <li><a href="#nogo">澳洲4月移民新政</a></li>
    <li><a href="#nogo">南洋理工金融硕士</a></li>
    <li><a href="#nogo">留学！不是独木桥</a></li>
    <li><a href="#nogo">北大国学总裁班！！</a></li>
    <li><a href="#nogo">出国留学上533留学网</a></li>
    <li><a href="#nogo">解决政府平台融资难</a></li>
    <li><a href="#nogo">40万元起拿加澳绿卡</a></li>
    <li><a href="#nogo">北大总裁/脱产/CFO</a></li>
    <li><a href="#nogo">香港中文大学EMBA</a></li>
</ul>
</div>
</body>

效果图：

3.ie6,7下ul的底部内填充失效问题，hack详见http://www.52css.com/article.asp?id=907

4.li的折行问题，这个好解决，给它添加white-space:nowrap;代码如下：

<body>
      <div class="bt_link">
           <ul>
               <li><a href="#nogo">相机</a></li>
               <li><a href="#nogo">好相机</a></li>
               <li><a href="#nogo">不好的相机</a></li>
               <li><a href="#nogo">是相机</a></li>
               <li><a href="#nogo">好相机很好</a></li>
               <li><a href="#nogo">相机</a></li>
               <li><a href="#nogo">好相机</a></li>
               <li><a href="#nogo">不好的相机</a></li>
               </ul>
           </div>
</body>

ie6,7，8效果图：

5.ie系列默认的未清除掉的列表项目符号位置，解决办法是重置list-style:none outside none。

通常设置ul{list-style:none;}在ie下的效果：

7.列表项高低不齐，代码如下：

ie6,7,8 下效果图:

如何解决这个问题呢？

font-family:"宋体";

8.ie6下列表项的错误行距，解决办法是给li声明浮动，并清除浮动，或者声明a的宽度为100%。代码如下：
<style type="text/css">
* {
margin:0;
padding:0;
}
body { font-size:12px; }
ul {
float:left;
width:690px;
border:1px solid red;
list-style:none;
}
ul li {
/*float:left;clear:left;*/
}
a{display:block;/*width:100%;*/white-space:nowrap;}
</style>
</head>
<body>
<ul>
    <li><a href="#nogo">国际财务管理师！</a></li>
    <li><a href="#nogo">澳洲4月移民新政</a></li>
    <li><a href="#nogo">南洋理工金融硕士</a></li>
</ul>
</div>