清除浮动列表项目

嗨我无法清除我已经浮动的列表项目左侧正如你可以从我的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

清除浮动列表项目

回答

相关问题