html - 如何在 float :left with different height? 后开始新行

Question

我在 jsfiddle 上有这段代码.

如您所见，第 3 或第 4 个 li 项在新行中开始(取决于您的窗口宽度)。但是由于高度不同，这条新线并没有从线的开头开始。

如何在 CSS 中让新行总是在行的开头？

<ul>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_01" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:190px;">here is an img in real</div>
        <input type="text" id="img_02" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:180px;">here is an img in real</div>
        <input type="text" id="img_03" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_04" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_05" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height: 150px;">here is an img in real</div>
        <input type="text" id="img_01" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
</ul>

ul { width: 650px; }
li {
    display: block;
    width: 200px;
    float: left;
    margin: 2px;
}
.imgplace {
    width: 200px;
    background: #f00;
}
.imgicon {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
}
}

Answer 1

只需删除 float:left 并添加 display: inline-block 和 vertical-align: top 以更好地对齐它们(+1 Hashem来自评论)

尝试

li {
   display: inline-block;
   width: 200px;
   margin: 2px;
   vertical-align: top;
}

DEMO