商业澳洲 文章 ul无序列表常见问题总结

ul无序列表常见问题总结

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

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

<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;
width:134px;
/*line-height:1.5em;设置行高可以解决浮动空白问题*/
}

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>

效果图:

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

<style type="text/css">
*{margin:0;padding:0;}
.bt_link{width:280px;height:200px;border:1px solid red;}
ul{list-style:none;overflow:hidden;zoom:1;}
li{float:left;margin-right:2px;}
li a{float:left;padding:2px 4px;border:1px solid gray;text-decoration:none;}
</style>
</head>

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

<style type="text/css">
* {
margin:0;
padding:0;
}
div {
width:200px;
height:100px;
border:1px solid red;
}
ul {
/*通常的设置在ie下并不管用*/ list-style:none outside none;
float:left;
display:inline;
border:1px solid green;
}
</style>
</head>
<body>
<div>
<ul>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
</ul>
</div>

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

7.列表项高低不齐,代码如下:

<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;margin-left:10px;
/*line-height:1.5em;设置行高可以解决浮动空白问题*/
}
a{display:block;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>

ie6,7,8 下效果图:

如何解决这个问题呢?

<meta http-equiv="Content-Type" content="text/html; charset=utf-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>

ie6下效果图(图上的ie7其实是同样代码来回更改,名字未改):

原文链接:https://blog.csdn.net/weixin_30701521/article/details/97127841?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169287040816800211589893%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=169287040816800211589893&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-3-97127841-null-null.268%5Ev1%5Ekoosearch&utm_term=%E6%BE%B3%E6%B4%B2%E7%95%99%E5%AD%A6%E7%A7%BB%E6%B0%91

作者: 知澳头条

知澳资深作者

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

联系我们

1300766331

邮箱: info@getau.com.au

澳洲本地网站设计开发团队 超20人团队,悉尼设计开发14年 联系电话:1300766331 微信: XtechnologyAU
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部