为什么这些宽度为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

元素之间有空格（换行符，制表符等）。 将其删除（或将其注释掉），它们将符合您的期望：

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>

内联*元素之间使用空格。 浮动工作的原因是元素不再内联。

Answer 2

试试这种风格：

input{float:left}

Answer 3

可能您还设置了1px的边框，该边框将增加50％。