Clearfix停止Word Wrap

我不得不将clearfix应用到我的列表项中，以便边框环绕我的浮动框，但是一旦我添加了clearfix，它就会导致我已应用于列表的一个wordwrap停止工作，现在长URL将div扩展到其他div。Clearfix停止Word Wrap

如果有人可以帮助解决这个问题，将不胜感激。这个问题可以在这里查看：http://www.noellesnotes.com（Tweets部分的页脚）。

这里; S相关的代码：

HTML

<div id="tweets"> 
    <ul> 
     <li class="clearfix"> 
      <p class="tweet">The tweet.</p> 
      <p class="timePosted">TIME</p> 
      <p class="interact">INTERACT LINKS</p> 
     </li> 
    </ul> 
</div>

CSS

.tweet, .tweet a, .tweet span, .interact a{ 
    margin-bottom: 10px; 
    font-size: 12px; 
    font-family: 'Open Sans', sans-serif, Georgia, sans-serif; 
    word-wrap:break-word; 
} 

.timePosted{ 
    width:40%; 
    font-size: 12px; 
    float: left; 
    font-weight: bold; 
    text-align: left; 
} 

.interact{ 
    width:60%; 
    font-size: 12px; 
    float: left; 
    text-align: right; 
    overflow: hidden; 
} 

.interact a{ 
    margin-right: 3px; 
    text-decoration: underline; 
    font-family: 'Arvo', Georgia; 
} 

#tweets ul{ 
    margin-left: 0; 
    padding-left: 0; 
    list-style: none; 
} 

#tweets ul li{ 
    border: 3px solid rgba(255,255,255,0.4); 
    margin: 3px 0; 
    padding: 3px; 
} 

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

.clearfix { /* for IE/Mac */ 
    display: inline-block; 
}

来源

2014-01-19 nellygrl

IE/Mac ?!为什么？！？ – bjb568

大声笑。好问题...这个clearfix是由另一个stackoverflow用户向我推荐的......穿过所有的ts。大声笑。 – nellygrl

我们会的，它肯定是过时的信息。现在我使用：after {content：'';显示：表格;明确：两者;} – bjb568

添加：

#tweets ul li { width: 100%; }

解决这个问题对我来说:)

来源

2014-01-19 18:35:40

谢谢！这工作！ – nellygrl

太棒了！乐意效劳。不要忘记接受，如果你们都在这里设置:) –

接受吧！再次感谢。 – nellygrl

Clearfix停止Word Wrap

回答

相关问题