gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:59:02 26 4
gpt4 key购买 nike

使用下面编写的代码,包含 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>

Layout with SELECTS

当 Selects 和相应的 DIV 被删除时,我明白了...正确。 Layout without SELECTS and DIVs

最佳答案

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

至于问题 - 您只需要在包装 div 元素上设置高度。 input 元素的高度为 24pxselect 元素的高度为 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

关于css - 带有选择的 float DIV 在布局中创建空列,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20821119/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com