为什么我需要清除:两者都在#message声明中 [英] why do I need clear:both in the #message declaration
问题描述
如果我在 #message
声明中同时具有 clear:both;
然后 padding- top:30px;
是正确的,但是如果我删除
#message p
声明中的 clear:在
#message
声明中都 c,然后
那么为什么要在 #message
声明中需要 clear:both
才能使用$ b在 #message p
声明中的$ b 填充顶部
。
If I have clear:both;
in the #message
declaration then padding-top:30px;
in the
#message p
declaration will be correct but if I remove the clear:both
in the
#message
declaration then padding-top:30px;
doesn't take effect.
So why do I need clear:both
in the #message
declaration for being able to use
padding-top
in the #message p
declaration.
CSS
body {
margin: 5px;
padding: 0;
font-family: Arial, sans-serif;
font-size: small;
text-align: center;
width: 768px;
}
#register {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
color: #690;
background: #BDDB62;
}
#register a {
text-decoration: none;
color: #360;
}
#reg {
float: left;
margin: 0;
padding: 8px 14px;
}
#find {
float: right;
margin: 0;
padding: 8px 14px;
}
#message {
clear: both;
font-weight: bold;
font-size: 110%;
color: #fff;
text-align: center;
background: #92B91C;
}
#message p {
margin: 0;
padding-top: 30px;
}
#message strong { text-transform: uppercase }
#message a {
margin: 0 0 0 6px;
padding: 2px 15px;
text-decoration: none;
font-weight: normal;
color: #fff;
}
HTML
<ul id="register">
<li id="reg">Not registered? <a href="#">Register</a> now!</li>
<li id="find"><a href="#">Find a store</a></li>
</ul>
<div id="message">
<p>
<strong>Special this week:</strong> $2 shipping on all orders!
<a href="#">LEARN MORE</a>
</p>
</div>
推荐答案
您的代码: #register {float:left;}
不要使用 float:left;
,因为它将影响IE中的某个时间。。相反,您使用 display:inline-block
或 overflow:hidden
。它将使您的代码更适合所有主流浏览器。
Dont use float:left;
ever, because it will affect some time in IE.. Instead you use display:inline-block
or overflow:hidden
. It will make your code better for all major browsers.
这篇关于为什么我需要清除:两者都在#message声明中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!