1

我有两个表单元素（一个文本输入和一个提交按钮），我想显示在一行上，宽度均为 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它们保持在一条线上时没有问题。

这是为什么？

4

3 回答 3

5

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

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>

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

于 2013-04-16T16:25:59.310 回答
1

试试这种风格：

input{float:left}
于 2013-04-16T16:31:23.610 回答
0

可能您还设置了 1px 的边框，这将添加到 50%。

于 2013-04-16T16:22:26.720 回答