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

【问题标题】：elements do not fit in single line even though width sums to 100%即使宽度总和为 100%，元素也不适合单行
【发布时间】：2014-08-12 06:32:40
【问题描述】：

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 但由于某种原因最后一个选择溢出并转到第二行。我不明白为什么会这样。它们应该能够放在一行中吗？

【问题讨论】：

标签： html css css-float

【解决方案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 来解决这个问题，例如this

【讨论】：

非常感谢。你能推荐一种方法，这样我就可以实现我想要的结果，而不必将所有元素放在一行中，因为这确实降低了可读性
@death_relic0 你可以像this 一样使用float。

【解决方案2】：

答案与@TJ 相同，但没有 cmets 相反，我更喜欢关闭下一行的标签，因为 html cmets 很难看：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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：