css - 带有选择的 float DIV 在布局中创建空列，为什么？

Question

使用下面编写的代码，包含 SELECT 4 的 DIV 被向右推 2 列，但如果我从 HTML 中删除所有 SELECTS，则对齐方式正确地堆叠在另一列之下，没有跳过列。 - 是否有一些默认 CSS 应用于 SELECT 或我在这里缺少的东西？为什么会这样？

<div style="height:300px; text-align:right; padding-right:8px; margin-top:5px;">
<div style="float:left; width:33%;">1: <select name="brands" style="width:65%;">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select></div>
<div style="float:left; width:33%;">2: <input type="text" name="model" style="width:65%;" /></div>
<div style="float:left; width:33%;">3: <select name="type" style="width:65%;">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div style="float:left; width:33%;">4: <select name="caliber" style="width:65%;">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select></div>
<div style="float:left; width:33%;">6: <input type="text" name="accuracy" style="width:65%;" /></div>
<div style="float:left; width:33%;">7: <input type="text" name="finish" style="width:65%;" /></div>
<div style="float:left; width:33%;">8: <input type="text" name="action" style="width:65%;" /></div>
<div style="float:left; width:33%;">9: <input type="text" name="stock" style="width:65%;" /></div>
<div style="float:left; width:33%;">10: <input type="text" name="capacity" style="width:65%;" /></div>
<div style="float:left; width:33%;">11: <input type="text" name="chokes" style="width:65%;" /></div>
<div style="float:left; width:33%;">12: <input type="text" name="chamber" style="width:65%;" /></div>
</div>

当 Selects 和相应的 DIV 被删除时，我明白了...正确。

Answer 1

由于使用内联 CSS(通过 style 属性)不是最佳选择，我重写了所有内容以将 HTML 与 CSS 分开。还值得注意的是，您应该将元素的文本包装在 label 元素中。如您所见，您将标签的 for 属性与 id 相匹配。

至于问题 - 您只需要在包装 div 元素上设置高度。 input 元素的高度为 24px，select 元素的高度为 26px。当元素具有不同的高度时， float 元素通常会换行。 26px 的高度就足够了。 (working example)

CSS:

form {
    height:300px;
    text-align:right;
    padding-right:8px;
    margin-top:5px;
}
form > div {
    width:33%;
    float:left;
    height:26px;
}
form > div > select, form > div > input {
    width:65%;
}

更新的 HTML

<form>
    <div>
        <label for="brands">1:</label>
        <select id="brands" name="brands">
            <option value="option1">option1</option>
            <option value="option2">option2</option>
            <option value="option3">option3</option>
        </select>
    </div>
    <div>
        <label for="model">2:</label>
        <input type="text" id="model" name="model" />
    </div>
    <div>
        <label for="type">3:</label>
        <select id="type" name="type">
            <option value="option1">option1</option>
            <option value="option2">option2</option>
            <option value="option3">option3</option>
        </select>
    </div>
    <div>
        <label for="caliber">4:</label>
        <select id="caliber" name="caliber">
            <option value="option1">option1</option>
            <option value="option2">option2</option>
            <option value="option3">option3</option>
        </select>
    </div>
    <div>
        <label for="accuracy">5:</label>
        <input type="text" id="accuracy" name="accuracy" />
    </div>
    <div>
        <label for="finish">6:</label>
        <input type="text" id="finish" name="finish" />
    </div>
    <div>
        <label for="action">7:</label>
        <input type="text" id="action" name="action" />
    </div>
    <div>
        <label for="stock">8:</label>
        <input type="text" id="stock" name="stock" />
    </div>
    <div>
        <label for="capacity">9:</label>
        <input type="text" id="capacity" name="capacity" />
    </div>
    <div>
        <label for="chokes">10:</label>
        <input type="text" id="chokes" name="chokes" />
    </div>
    <div>
        <label for="chamber">11:</label>
        <input type="text" id="chamber" name="chamber" />
    </div>
</form>

或者，您可以避免 float 元素并使用inline-block 级别元素；无需在元素上设置高度即可实现相同的效果。

Example demonstrating this