Question

您好我无法清除我已经浮动的列表项目正如您从我的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>

Jeez我应该知道如何做到这一点，头脑已经空白了！任何想法？

Answer 1

删除float:left并使用display: inline-block; vertical-align: top;

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

<强> DEMO

Answer 2

的 Demo 的

你好习惯:nth-of-type(odd)

就像这样

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

的 Live demo 的

Answer 3

试试这个：

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

Answer 4

使用display: inline-block;代替float: left;。另外，不要忘记使用vertical-align: top;正确对齐容器。

实施例： http://jsfiddle.net/EqHXP/3/

清除浮动列表项

4 个答案: