Question

jsfiddle ：http://jsfiddle.net/wngf9xy9/

HTML ：

<div class="cont">
    <label class="Label"> Label1 </label>
    <input type="text" class="inp1" maxlength="11">
    <select name="select1" id="select11" class="select1" >
        <option value=""></option>
        <option value="value1">value1</option>

    </select>

    <br>

    <label class="Label"> Label2 </label>
    <select name="select2" class="select2" >
        <option value=""></option>
        <option value="value2">value2</option>
    </select>
</div>

CSS

.cont{
    width: 300px;


}
.cont *{
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box;
}
.cont label{
    width: 22%;
    display: inline-block;
}

.cont .inp1{
    width: 20%;

    height: 20px;
}
.cont .select1{
    width: 53%; /*fallback*/
    width: calc(58% - 15px);
    margin-left: 15px;  
    height: 18px;
    top: 0px;
}

.cont .select2{

    width: calc(78% - 15px);
    margin-left: 15px;  
    height: 18px;
    top: 0px;
}

我有上面的HTML / CSS由于某种原因，最后一次选择溢出并转到第二行。我不明白为什么会这样。他们应该能够适应单线？

Answer 1

inline和inline-block元素将空格和换行符视为单个空格。如果您删除换行符或将其注释掉，如下所示，它将在一行中对齐。

<div class="cont">
<label class="Label"> Label1 </label><!--
--><input type="text" class="inp1" maxlength="11"><!--
--><select name="select1" id="select11" class="select1" >
    <option value=""></option>
    <option value="value1">value1</option>

</select>

Updated Fiddle

在这种情况下，我们可以使用float

等{{1}}解决此问题

Answer 2

答案与@TJ相同，但没有评论相反，我更喜欢关闭下一行的标签，因为HTML评论很难看：p

http://jsfiddle.net/wngf9xy9/3/

<div class="cont">
    <label class="Label"> Label1 </label
   ><input type="text" class="inp1" maxlength="11"
   ><select name="select1" id="select11" class="select1">
        <option value=""></option>
        <option value="value1">value1</option>
    </select>
    <br>
    <label class="Label"> Label2 </label
   ><select name="select2" class="select2">
        <option value=""></option>
        <option value="value2">value2</option>
    </select>
</div>

Answer 3

如果您尝试将label的css从inline-block更改为inline，则所有元素都将放在一行中。

Answer 4

使用float left将元素放在一起。并添加一个中断以正确和整齐地对齐它们，你就完成了。

This is the FIDDLE done:
http://jsfiddle.net/ezLe2mfn/

即使宽度总和为100％，元素也不适合单行

4 个答案: