Question

我在answer中使用了calc属性，但是我有一些麻烦来计算元素的宽度％，边距，填充和边框设置在 px

请参阅此example：

#form {
    margin: 200px auto;
    width: 360px;
    background:green;
    padding:0
}

 input[type="text"], input[type="password"] {
    width: calc(50% - 42px);
    margin: 10px;
    padding: 10px;
    border: solid 1px #000;
}

有两个输入。我希望他们完全填充他们的父div。我的计算是：

100%= (input_width + ( margin_width + padding_width + border_width ) * 2 ) * 2

=> input_width= 50% - 42px

但实际上，如果我希望2个输入保持在同一行，我可以使用的最大宽度是 50％ - 45px 。那忘记了什么？ http://jsfiddle.net/uL2syf4m/3/

Answer 1

原因是由于标记创建的空白区域以及inline-block元素如何处理它。删除两个input元素之间的换行符和标签，然后您可以设置width: (calc(50% - 42px);。更多详情HERE

FIDDLE

Answer 2

你需要让它们浮动才能使它工作。

#form {
    margin: 50px auto;
    width: 360px;
    background:green;
    padding:0
}
#form::before, #form::after{
    content: " ";
    display: table;
    clear: both;
}

 input[type="text"], input[type="password"] {
     float:left;
    width: calc(50% - 42px);
    margin: 10px;
    padding: 10px;
    border: solid 1px #000;
}

<div id="form">
    <input type="text" id="input1"/>
    <input type="text" id="input2" />
</div>

这是jsfiddle：

http://jsfiddle.net/uL2syf4m/4/

以％和px处理大小以实现完美对齐

2 个答案: