4

我有一个简单的 html页面和一个相当简单的 css，它让我发疯 - 我根本不明白这里发生了什么（最初的任务是创建一个简单的联系表格，使用modernizr，但我已经剥离了一切） ：

<html>
<head>
    <style>
        body {
            font-size: 16px;
            line-height: 26px;
        }

        label {
            float: left;
            margin-top: 4px;
        }

        input {
            border: 1px solid #ccc;
            margin: 4px;
        }

        input:focus {
            border: 2px solid #900;
        }
    </style>

</head>
<body>
    <label>1:</label><input id="1" /><br />
    <label>2:</label><input id="2" /><br />
    <label>3:</label><input id="3" /><br />

</body>
</html>

带有标签的三行和输入框的左边距增加，如果我将焦点设置为任何输入，下面的会跳回（至少在 Chrome 和 FF 中）。为什么？

现在，如果我删除几乎任何css 属性，事情就会变得陌生：

  1. 上面的原文可以在这里找到。
  2. 如果我删除了正文线（甚至只删除了line-height: 26px; part!!），左边距就会消失（为什么？），请在此处查看。
  3. 如果我删除input:focus线，则不再发生跳转（为什么？），请在此处查看。
  4. 如果我删除边框：1px solid #ccc; 从输入，边距消失了（为什么？？？），检查这里。

还有其他的相互依赖关系。这在 jsfiddle 和其他在线工具中不会发生，但可以在本地轻松复制。

底线：整个行为对我来说似乎完全陌生，我希望 CSS Sherlock Holmes 可以阐明这里发生的事情。

4

2 回答 2

3

问题在于编号列表。

您正在设置一个边距顶部，并使行高大于文本本身。这通常很好，但这会使数字大于输入框。

您正在强制使用新线，<br />它们不能自然地浮动到它们应该在的位置，因为之前的数字对于它的“线”来说“太大”。

我正在努力解释它，但要修复它，您可以添加line-height: 2;到输入框或您提到的任何修复程序，或者最好将其全部替换为有序列表。

如果您仍然不明白，请尝试border: 1px solid #000;在标签上设置，您会明白我的意思。

于 2012-11-26T14:22:14.697 回答
2

意外的行为是因为labels它们在相同的float上下文中起作用，而没有clear破坏它。所以当你告诉你的第二个label到float左边时，它会找到前一个标签，因此“堆叠”到右边。

将以下内容添加到您的 CSS（如果您坚持使用br标签）：

br {
    clear: both;
}
于 2012-11-26T14:19:03.713 回答