是否可以在同一行上有两个元素？（紧密配合）我设置一个使用 80% 宽度，另一个使用 20%，但它不适合空间？
这就是我的意思http://jsfiddle.net/NuZxj/
我认为这是可能的，但我对 HTML 和 CSS 很陌生。
问问题
3378 次
5 回答
3
这是因为两件事；首先：该width属性没有设置元素的“总宽度”，总宽度由宽度、边框宽度和填充组成。
其次，HTML 中两个元素之间的换行符将呈现为单个空格字符，因此 20% 加上 80% 无论如何都会超过 100%。
也就是说，如果您将两个元素放在 HTML 中的同一行并使用以下内容box-sizing，则边框宽度和填充包含在width元素中，如通过 CSS 设置的那样（我相信，IEwidth默认以这种方式计算):
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
input另请注意，HTML 已更改，因此两个元素之间没有任何类型的空格。
于 2012-08-14T17:02:44.493 回答
1
元素有一个边框，可以防止它们在同一条线上，因为它会增加它们的宽度。将其设置为 0 并使它们向左浮动。演示
#footer input[type=text]
{
border: 0;
float: left;
}
input.button {
border: 0;
float: left;
}
于 2012-08-14T16:59:30.477 回答
0
添加float: right;到按钮以将其强制到 div 的右侧，这会将两个元素放在同一行。如果您不希望它在右侧，这当然看起来不正确。
请注意，我还将文本元素的宽度更改为略小于 80%，以便它适合同一行。
于 2012-08-14T16:57:31.547 回答
0
这两个元素不适合同一行，因为定义了填充和/或边距。
这意味着80% + 20% + margin + padding + border > 100%.
width 属性不考虑边距、填充或边框。
为了解决这个问题，您可以将边距、填充和边框设置为0px，将百分比宽度减小一点以进行补偿，或者（最复杂的选项）将输入包装在不可见的 div 中并设置其宽度.
于 2012-08-14T17:04:43.817 回答
0
肯定的事。
但是关于 HTML 元素的事情，你不能总是width单独依赖它，因为有些东西会增加元素占用的实际空间，例如margin和border。这称为“盒子模型”，您可以在此处阅读：http ://www.quirksmode.org/css/box.html或此处：http ://www.w3.org/TR/CSS2/box .html
在您的示例中，这意味着width确实占据了 100%，例如，按钮上的边框没有空间 - 这就是按钮跳到下一行的原因。
您可以删除border,padding和margin, 或调整width这两个元素中的 。
于 2012-08-14T17:02:19.840 回答