UC知道高人讲解下这段CSS代码
来源：百度知道 编辑：UC知道 时间：2024/07/05 01:28:29
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</body>
</html>
其中第一个float left和第二个float left有什么区别
还有display-inline这段能用float left代替吗 我是新手 请讲详细点
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</body>
</html>
其中第一个float left和第二个float left有什么区别
还有display-inline这段能用float left代替吗 我是新手 请讲详细点
其实这个可以写成下面的，去掉了li表情和为a增加了display:block;属性
a本来是行内元素的也就是display:inline;你对他设置的width;height;margin;padding 的块元素的属性是没有任何效果的，
你可以百度一下行内元素和块元素的区别。
为什么这样可以用到这些width属性呢,关键在这里 float:left;
呵呵，这个属性的优先级很高的，设了这个属性float后，即使你在用display:inline来再次强制转换为行内元素也是没用的，float的优先级高
你可以这样写a{ float:left;display:inline;width:7em;}，也可以这样写a{ float:left;width:7em;}，也可以a{ float:left;display:block;width:7em;}，
呵呵，我记得第一种写法是可以解决臭名昭著的IE6双倍浮动问题的。
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
display:block;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
</style>
</head>
<body>