今天看到经典一网友问题:
不知为什么,它们三个中间总是有一条缝?
代码如下:
<style>
#left {
width:5px;
height:23px;
background-color:#ff6600;
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:left; /*超出宽度部分隐藏*/
}
#right {
width:5px;
height:23px;
background-color:#ff6600;
float:right; /*浮动居左*/
clear:right; /*不允许左侧存在浮动*/
overflow:right; /*超出宽度部分隐藏*/
}
#m {
/*width:794px; 调整菜单位置*/
height:23px;
background-color:#000000;
margin:0px auto;
/*padding-left:40px;*/
display:block;line-height:22px;
}
</style>
<div id=left></div>
<div id=right></div>
<div id=m></div>
一个朋友用margin:-3px的办法把问题解决了,但没有找到问题根本所在,偶看了下代码,感觉应该是块元素在作怪,因为楼主定义中间一块的属性display:block;在css中块元素总是会留出一定的空白,另外clear属性可能一会导致块元素的形成。
最后偶将代码改成这样(设定固定大小,去除块元素属性):
<style>
#all{
width:600px;
}
#left {
width:5px;
height:23px;
background-color:#ff6600;
float:left; /*浮动居左*/
}
#right {
width:5px;
height:23px;
background-color:#ff6600;
float:right; /*浮动居左*/
}
#m {
height:23px;width:590px;
background-color:#000000;
line-height:22px;
float:left
}
</style>
<div id="all">
<div id=left></div>
<div id=right></div>
<div id=m></div>
</div>