处理大小以％和px为完美对齐 [英] Dealing with size in % and px for a perfect alignment

问题描述

我在回答中使用了calc属性，但我有一些麻烦，计算元素的宽度％边距，边距，边距和边框设置

I used the calc property in an answer, but I have some troubles to compute the width % of an element with margins, padding and borders set in 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。
我的计算是：

There is two inputs. I want that they fill completly their parent div. My calculation is:

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

=> input_width= 50% - 42px

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

but actually, the max width that I can use is 50% - 45px if I want that the 2 inputs stays at the same line. So What I forgot? http://jsfiddle.net/uL2syf4m/3/

推荐答案

元素。删除两个输入元素之间的换行符和制表符，然后可以设置 width：（calc（50％ - 42px）; 。更多详情这里

The reason is because of the white space created by your markup and how it's treated by inline-block elements. Remove the line break and tabs between your two input elements and you can then set width: (calc(50% - 42px);. More details HERE

FIDDLE

这篇关于处理大小以％和px为完美对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！