我有两个表单元素(一个文本输入和一个提交按钮),我想在一行上显示,两者的宽度均为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:blockinline-block无济于事。 但是,当我将它们都设置为width:50% ,并且float:leftfloat:right它们都停留在一行上而没有问题。

这是为什么?

===============>>#1 票数: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>

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

===============>>#2 票数:1 已采纳

试试这种风格:

input{float:left}

===============>>#3 票数:0

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

  ask by translate from so

未解决问题?本站智能推荐:

6回复

使用填充样式化HTML FORM元素,宽度为100%

我通过使用具有固定宽度列的表来设置表单样式,我希望<td>的输入元素填充容器。 我知道CSS盒子模型,我知道元素会在width: 100%渗透width: 100% ,但问题在于它的一致性。 <input>元素按预期渗透,但<select>元素没有。
2回复

宽度为100%的HTML文本输入稍微超出了包含表格单元格的结尾

相当简单的问题; 我有一个包含HTML表单输入的表,并将其中一个元素设置为跨越表宽度的100%。 但是,它似乎稍微超出了它所包含的单元格的末端: https://jsfiddle.net/abz7mtsj/1/ 它在jsfiddle中几乎不引人注意,但在我的页面上,它是一张大桌
1回复

无法更改文本区域的宽度

我无法使用html行和cols来更改textarea的宽度,也无法使用CSS宽度来更改它。 我用html改变了高度。 如何更改宽度? form, label { position: relative; width: 310px; margin-left: 65px; }
3回复

为什么输入字段宽度随输入数量(弹性盒)而增加?

我正在实现一个包含多个具有不同数量输入字段的部分的表单。 当在父div上使用display: flex并在输入字段上使用100%宽度时,根据表单内输入字段的数量,我得到的宽度会有所不同。 使用display: block ,一切都会按预期进行。 <section> On
1回复

边框框100%宽度计算-文本不合适

我有一个令人困惑的有趣的盒子模型/宽度/继承问题。 基本上,这就是我所拥有的: 在此简化模型中, <td>具有(必须具有)自动宽度, <button>具有100%的宽度,并且display:block; 这样所有按钮的宽度都一样, <button>
1回复

如何使用列表中显示的表单元素和基于“ display:table”的布局修复Internet Explorer 9溢出

我想用语义和轻量级标记构建HTML表单。 每个(标签,输入)嵌套在li节点内, ul子级, form 。 就CSS而言, form内的所有ul都应布置为表格,列表项应布置为表格行,标签和输入都布置为表格单元格。 这是一个演示 我已经在Chrome 17.0.963.79,Oper
1回复

iPhone的Safari上的表单宽度增加

我不明白为什么iPhone的Safari上的表单宽度会增加。 我试图修改我的CSS,似乎是“字体大小”引起了问题。 有解决方案吗? 这是代码: HTML : CSS :
3回复

按下提交时,输入文本填充会保持宽度变化

我有一个简单的登录表单宽度用户名和密码字段以及提交按钮。 在单击提交按钮之前,输入字段的宽度为预期的212px 。 单击提交按钮时,宽度更改为200px 。 这是输入的CSS: 这是输入: 它不在任何div或任何东西中。 我想要的是在提交表单之前和之后保持相同的宽度
9回复

宽度:100%的CSS输入超出了父级的范围

我试图创建一个由两个带有插入填充的输入字段组成的登录表单,但这两个字段总是超出其父节点的边界; 问题源于添加的插入填充。 可以采取哪些措施来纠正这个问题? JSFiddle片段: http : //jsfiddle.net/4x2KP/ 注意:代码可能不是最干净的。 例如,根本
1回复

Textarea最大宽度没有受到尊重

此Codepen中的textarea和下面的代码在苗条的视口中溢出。 它具有max-width: 100% .preset-box max-width: 100% ,但是当textarea大于视口时,它将导致视口水平溢出。 我试图改变和删除都cols都无济于事。 我尝试将resize限制为