Question

http://jsfiddle.net/slugwarden/VGPk4/1/

form { display: inline-block; }

...似乎适用于IE和Firefox。但是，Chrome的输入字段右侧会添加一些额外的空间。

基本上，我希望表单的宽度与文本输入字段的宽度相同（这将是表单中最宽的元素），这样我可以向右或向左对齐表单中的其他元素到输入字段的右边或左边。

任何已知的解决方法？

Answer 1

尝试width:100%和box-sizing:border-box。 FIDDLE

input {
    margin: 4px 0;
    padding: .5em;
    font-family: sans-serif; /* IE - make input text/password fields same size */

    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    width:100%;
}

注意：Box-sizing可以回到IE8。

Answer 2

如user3212461所述，您需要将font-size设置为0（我做0.01px），然后将其重置为子项。

这是典型的chrome行为，在行尾添加了额外的空格。

实际上可能正在开始。它在html中的内联元素之间呈现空白区域。

对于浮动按钮，margin:0将执行：

DEMO

CSS更新：

html, body {
    font-family: sans-serif;
}
input {
    margin: 4px 0;
    padding: .5em;
    font-family: sans-serif; /* IE - make input text/password fields same size */
}
form {
    border: thin dashed purple; /* visualization */
    display: inline-block;/* inline-table works too */
    font-size:0.1px; /* make sure it is applied , 0 might be rejected by browser for accessibility/readability reasons */
}
button {
    font-size: large;
    float: right;
    margin:0; /* simple reset */
}
p {
    width: 400px;
}
b {
    font-size:16px;/* fallback for rem units */
    font-size:1rem;
}

已移除<br/>的

内嵌表格版本：http://jsfiddle.net/VGPk4/5/

Answer 3

浮动输入将修复它。虽然看起来有点hacky。

Answer 4

form {
    border: thin dashed purple; /* visualization */
    display: inline-block;
    font-size: 0;
}

form b {
    font-size: 16px;
}

添加font-size：0;形成。

example

如何使表单的宽度等于Chrome中输入字段的宽度？

4 个答案: