Почему эти элементы не имеют ширину 50% на одной строке?

Question

У меня есть два элемента формы (текстовый ввод и кнопка отправки), которые я хочу отобразить на одной строке, шириной 50%. Это не работает со следующим HTML/CSS:

HTML

<form name="newsletter" target="#" method="post" class="group"> 
    <input name="email" type="text" placeholder="email here..." /> 
    <input name="submit" type="submit" class="button" value="subscribe" /> 
    </form> 

CSS

* { 
    box-sizing:border-box; 
} 

input[type="text"] { 
    margin: 0; 
    width: 50%; 
    font-size: 0.75rem; /* 16x0.75=12px */ 
    padding: 0.625em; 
    border: 1px solid black; 
    border-radius: 0.3125em 0.3125em 0.3125em 0.3125em; 
} 

input[type="submit"] { 
    margin: 0; 
    width: 50%; 
    font-size: 0.75rem; /* 16x0.75=12px */ 
    padding: 0.625em; 
    border: none; 
    border-radius: 0.3125em 0.3125em 0.3125em 0.3125em; 
    text-transform: uppercase; 
} 

Установка их display:block или inline-block не помогает. Но когда я установил их как width:50%, так и float:left и float:right, они остаются на одной линии без проблем.

Почему?

Answer 1

Попробуйте этот стиль:

input{float:left} 

Answer 2

Возможно, вы также установили границу 1px, которая добавит 50%.

Answer 3

У вас есть пробелы (символы новой строки, вкладки и т. Д.) Между вашими элементами. Удалите его (или закомментируйте ее), и они подходят, как можно было бы ожидать:

http://tinker.io/9a125

<form name="newsletter" target="#" method="post" class="group"> 
    <input name="email" type="text" placeholder="email here..." /><!-- 
    --><input name="submit" type="submit" class="button" value="subscribe" /> 
    </form> 

Инлайн * элементы чтить пробелы между ними. Причина, по которой работают плавающие работы, состоит в том, что элементы больше не являются встроенными.