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

内联*元素表示它们之间的空格.浮动工作的原因是因为元素不再是内联的.