4

您是否需要<div style="clear:both">&nbsp;</div>在任何浮动内容之后使用类似的东西来确保您的 div 达到内容的全部高度，或者有没有更简单的方法来做到这一点？

下面是我目前使用的代码

HTML

<div class="socialmedia">
<h2>Stay Connected</h2>
<ul>
<li><img src="images/twitter.png" width="32" height="32" alt="Twitter" /></li>
<li><img src="images/googleplus.png" width="32" height="32" alt="Google Plus" /></li>
<li><img src="images/behance.png" width="32" height="32" alt="Behance" /></li>
<li><img src="images/dribble.png" width="32" height="32" alt="Dribble" /></li>
<li><img src="images/pinterest.png" width="32" height="32" alt="Pintrest" /></li>
<li><img src="images/email.png" width="32" height="32" alt="Email" /></li>
</ul>
<div style="clear:both">&nbsp;</div>
</div><!-- close social media -->

CSS

 .socialmedia {
width:960px;
background-color:#C69;

 }

 .socialmedia ul {
margin:0;
padding:0;
clear:both;
}


 .socialmedia ul li {
float:left;
list-style:none;
margin-right:20px;
 }
4

4 回答 4

5

您可以将溢出：自动添加到您的容器 DIV。

于 2012-09-07T15:11:03.853 回答
4

您可以给出.socialmedia一种样式overflow:hidden并删除清除 div。

于 2012-09-07T15:11:15.210 回答
1

使用li { display: inline-block; }- 为您提供将列表居中的灵活性，并且不需要任何浮动清除方法。

见：http: //jsfiddle.net/Wexcode/NKzm2/

请注意，在我添加的小提琴中ul { font-size: 0; }- 这是为了否定内联元素会导致标记中的空白在其字体大小不为零时显示的事实。

于 2012-09-07T15:21:28.237 回答
0

添加

.socialmedia ul:after {
    content:'';
    display:block;
    clear:both;
}
于 2012-09-07T15:18:08.037 回答