html - 处理以 % 和 px 为单位的大小以实现完美对齐

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