Как разместить два текстовых поля с полями в одной строке?

Question

Я пытаюсь расположить два поля ввода в одной строке, применив свойство float: left; в классе .inline.

Однако, поскольку все input[type="text"] имеют margin: 5px;, он будет работать только с width: 50%, только если я удалю поля.

С перевесом 5:

Без края:

Что бы идеальным решением?

Вот codepen ссылка: http://codepen.io/biskotaki/pen/YXdYYE?editors=110

Answer 1

input[type="text"] 
{ 
    box-sizing: border-box; 
    padding: 5px; 
    width: 100%; 
} 

.inline input { 
    float: left; 
    width: calc(50% - 10px); 
    margin:5px; 
} 

http://fiddle.jshell.net/fL0gm3h9/

Answer 2

Поскольку у вас уже есть .inline класс, добавьте это:

.inline>input[type="text"] {margin:0} 

Это отключит поле на соответствующих полях ввода.

Answer 3

уменьшить ширину до 48%

input[type="text"] 
 
{ 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    width: 100%; 
 
} 
 

 
.inline input { 
 
    float: left; 
 
    width: 48%; 
 
    margin:5px;}

<div class="inline"> 
 
    <input type="text" placeholder="text 1"> 
 
    <input type="text" placeholder="text 2"> 
 
</div>