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

回答

相關問題