Question

是否可以在同一条线上有两个元素？（紧身）我设置一个使用80％宽度，另一个使用20％，但它不适合空间？

我认为这是可能的，但我是HTML和CSS的新手。

Answer 1

这是因为两件事;第一：width属性不设置元素的'总宽度'，总宽度由宽度加上边框宽度加上填充。

其次，HTML中两个元素之间的换行符将呈现为单个空白字符，因此20％加上80％将加起来超过100％。

也就是说，如果将两个元素放在HTML中的同一行并使用以下box-sizing，则边框宽度和填充包含在元素的width内，如通过CSS（IE，我相信，默认以这种方式计算width）：

-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;

JS Fiddle demo

另请注意，HTML已更改，因此两个input元素之间没有任何空格。

Answer 2

元素有一个边框，可以防止它们与宽度相加而在同一条线上。将其设置为0并使它们向左浮动。 Demo

#footer input[type=text]
{
    border: 0;
    float: left;
}

input.button {
    border: 0;
    float: left;
}

Answer 3

http://jsfiddle.net/NuZxj/13/

将float: right;添加到按钮以强制它到div的右侧，这会将两个元素放在同一行上。如果您不希望它在右侧，这当然看起来不正确。

请注意我也将文本元素的宽度更改为略小于80％，因此它可以放在同一行上。

Answer 4

当然可以。

http://jsfiddle.net/NuZxj/7/

关于HTML元素的事情，它不能总是单独依赖于width，因为有些东西会增加元素占用的实际空间，例如margin和border。这被称为“盒子模型”，您可以在此处阅读：http://www.quirksmode.org/css/box.html或此处：http://www.w3.org/TR/CSS2/box.html

在你的例子中意味着width占据100％，例如按钮上没有空间，这就是按钮在下一行跳下的原因。< / p>

您可以删除border，padding和margin，也可以调整这两个元素的width。

Answer 5

这两个元素不适合同一行，因为有填充和/或边界定义。

这意味着80% + 20% + margin + padding + border > 100%。

width属性不考虑边距，填充或边框。

要解决这个问题，你要么想要将边距，填充和边框设置为0px，要么将宽度减少一小部分以进行补偿，要么（最复杂的选项）将输入包装在一个不可见的内容中div并设置其宽度。

同一行上有两个表单元素？

5 个答案: