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

内联*元素尊重它们之间的空白。 float 起作用的原因是元素不再内联。