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％。

为什么这些宽度为50％的表单元素不会显示在一行上？

3 个答案: