清除浮動列表項目

嗨我無法清除我已經浮動的列表項目左側正如你可以從我的jsFiddle看到的第一個列表項目是在搞亂佈局的第三個項目。見我 jsFiddle 清除浮動列表項目

<style> 

.wrap { 
    width:960px; 
    margin:0 auto; 
    overflow:hidden; 
} 

ul.team-members { 
    overflow:hidden; 
} 

ul.team-members li { 
    float:left; 
    width:450px; 
    margin-bottom:40px; 
} 

ul.team-members li img { 
    float:left; 
    width:120px; 
    padding-right:20px; 
} 

ul.team-members li p { 
    float:left; 
    width:310px; 
    margin:0; 
} 
</style> 

    <section class="wrap"> 

     <h1>Our Team</h1> 

     <div class="store"> 

      <h2>Monmouth</h2> 

      <ul class="team-members"> 

       <li> 
        <img src="_/img/t-member.jpg"> 
        <p><strong>Maureen</strong> - who is originally from Fife is our longest serving member of staff. Qualified to City & Guilds level in soft furnishings, Maureen is always keen to offer advice on projects, colour schemes, fabrics and trimmings. We have an 'Ask Maureen' option on our homepage where you can ask any soft furnishing or window treatment related question, the trickier the better as she loves a challenge!</p> 
       </li> 
       <li> 
        <img src="_/img/t-member.jpg"> 
        <p><strong>Rosyln</strong> - is known for her bubbly welcoming approach to all customers and is always keen to help with advice on the selection of suitable fabrics for your curtains, blinds or upholstery.</p> 
       </li> 
       <li> 
        <img src="_/img/t-member.jpg"> 
        <p><strong>Clare</strong> - has a background in interior design and is very experienced and knowledgeable on fabric choices, tracks, poles and the full spectrum of soft furnishing and upholstery options.</p> 
       </li> 
       <li> 
        <img src="_/img/t-member.jpg"> 
        <p><strong>Ann</strong> - Manages our team, our workrooms and arranges installation in conjunction with our.</p> 
       </li> 

      </ul> 

     </div> 
</section>

哎呀，我應該知道如何做到這一點，頭腦是一片空白！有任何想法嗎？

來源

2012-11-07 Rob

刪除float:left，並使用display: inline-block; vertical-align: top;

ul.team-members li { 
    display: inline-block; vertical-align: top; 
    width:450px; 
    margin-bottom:40px; 
}

DEMO

來源

2012-11-07 10:04:57 Sowmya

謝謝，這個技巧，非常方便的提示:)不是我支持ie7這些天，但我們需要使用顯示：內聯;縮放：1;因爲它不支持內聯塊。 – Rob

試試這個：

ul.team-members li { 
float:left; 
width:450px; 
margin-bottom:40px; 
clear: both; 
}

來源

2012-11-07 10:02:33 Michelle

都能跟得上抱歉一切不明確的花車所以沒有什麼是向左浮動，從而導致項目只是一個堆疊名單。 – Rob

Demo

嗨現在用於:nth-of-type(odd)

因爲這樣

ul.team-members li:nth-of-type(odd){ 
clear:both; 
}

Live demo

來源

2012-11-07 10:07:04

那麼你是否推薦這種方法或使用display：inline-block？ – Rob

我實際上已經用這種方法，並使用selectivizr目標ie6-8。鉭 – Rob

使用display: inline-block;而不是float: left;。另外不要忘記使用vertical-align: top;正確對齊容器。

例子： http://jsfiddle.net/EqHXP/3/

來源

2012-11-07 10:09:42 SKeurentjes

清除浮動列表項目

回答

相關問題