Question

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

因此，在此示例中，Tax ID最终位于Valid下拉列表下，而不是一直浮动到左侧。我已经在几个浏览器和几个版本中测试过，所以它一定是简单的我搞砸了。我该如何解决这个问题？

<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

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

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

如果列表是列中的第一，第二或第三，那就不重要了。

Answer 2

为li添加一个高度和select标签的缺失宽度似乎已经解决了问题，我的猜测是选择元素上的高度比其他元素更多/更少，即使它是一个像素，这就是为什么它不是被推到左边，而是停留在同一列上。 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 3

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

请参阅小提琴http://jsfiddle.net/DIRTY_SMITH/7oebee2m/7/

html dropdown搞砸html无序列表列

3 个答案: