html 下拉菜单打乱了 html 无序列表列

Question

我正在创建一个 3 列布局，其中大部分输入字段只有一个下拉列表 (html-select)。我使用宽度为 33% 的 float:left 将所有控件排列在一个无序列表中，以便它们每行形成 3 列。这一切都有效，除非下拉列表是该行的最后一个控件。如果是，它会通过在其下方错误地对齐来弄乱下一个控件。只有当下拉菜单是行中的最后一个控件时才会发生这种情况（在我的例子中是每 3 个控件，因为我将宽度分成 33%）。

因此，在此示例中，税号最终出现在“有效”下拉列表下方，而不是一直浮动到左侧。我已经在多个浏览器和多个版本中进行了测试，所以我搞砸的事情一定很简单。我该如何解决这个问题？

<style type="text/css">
ul.form 
{
    list-style: none;
}

ul.form li 
{
    display: block;
    float: left;
    width: 33%;
    padding-top: 15px;
}

ul.form li label.ctrlLbl 
{
    font-weight: bold;
    display: block;
    font-size: .85em;
}

ul.form li input 
{
    width: 180px;
}
</style>



<UL  class="form">

<LI>
<LABEL  class="ctrlLbl" >NAME</LABEL> <INPUT  /> 
</LI>

<LI >
<LABEL  class="ctrlLbl" >ID</LABEL> <INPUT /> 
</LI>

<LI >
<LABEL  class="ctrlLbl" >VALID?</LABEL> 
<SELECT> 
    <OPTION value="0">-- Make a Selection --</OPTION> 
    <OPTION value="Y">Y</OPTION>
    <OPTION value="N">N</OPTION>
</SELECT> 
</LI>

<LI >
<LABEL  class="ctrlLbl" >TAX ID</LABEL> <INPUT /> 
</LI>

<LI >
<LABEL  class="ctrlLbl" >CITY</LABEL> <INPUT /> 
</LI>

<LI >
<LABEL  class="ctrlLbl" >STATE</LABEL> <INPUT /> 
</LI>

<LI >
<LABEL  class="ctrlLbl" >COUNTRY</LABEL> <INPUT /> 
</LI>

</UL>

Answer 1

向 li 添加高度并向 select 标签添加缺少的宽度似乎已经解决了问题，我猜 select 元素的高度比 more/less其他的，即使它是一个像素，这就是为什么它没有被推到左边，而是留在同一列上。 https://jsfiddle.net/fngy8uvn/2/

    ul.form {
    list-style: none;
}
ul.form li {
    display: block;
    float: left;
    width: 33%;
    padding-top: 15px;
    // new value
    height: 50px;
}
ul.form li label.ctrlLbl {
    font-weight: bold;
    display: block;
    font-size: .85em;
}
// new property
ul.form li input, ul.form li select {
    width: 180px;
}

此外，我是否可以推荐使用 bootstrap 等响应式框架？它使这变得如此简单...... https://jsfiddle.net/mzjcu8oc/

<UL class="form">
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">NAME</LABEL>
        <INPUT />
    </LI>
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">ID</LABEL>
        <INPUT />
    </LI>
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">VALID?</LABEL>
        <SELECT>
            <OPTION value="0">-- Make a Selection --</OPTION>
            <OPTION value="Y">Y</OPTION>
            <OPTION value="N">N</OPTION>
        </SELECT>
    </LI>
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">TAX ID</LABEL>
        <INPUT />
    </LI>
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">CITY</LABEL>
        <INPUT />
    </LI>
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">STATE</LABEL>
        <INPUT />
    </LI>
    <LI class="col-sm-4">
        <LABEL class="ctrlLbl">COUNTRY</LABEL>
        <INPUT />
    </LI>
</UL>

ul.form {
    list-style: none;
}
ul.form li {
    height: 50px;
}
ul.form li label.ctrlLbl {
    display: block;
}
ul.form li input, ul.form li select {
    width: 100%;
}

Answer 2

将 class="taxid" 添加到持有税号的 li，然后在您的 css 中添加 .taxid{clear: both; float: left;}

见fiddlehttp://jsfiddle.net/DIRTY_SMITH/7oebee2m/7/

Answer 3

只需使用内联块并删除浮动。像这样https://jsfiddle.net/fngy8uvn/4/

ul.form li {
    display: inline-block;
    /*float: left;*/
    width: 33%;
    padding-top: 15px;
}

那么无论该列表在您的列中排在第一位、第二位还是第三位都无关紧要。

html 下拉菜单打乱了 html 无序列表列

html dropdown messes up html unordered list columns

html

css

html-lists

html-select