Question

我有一个简单的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属性，事情会变得陌生：

上面的原文可以找到here。
如果我删除正文行（或者甚至只删除行高：26px; 部分!! ），左边距消失（为什么？），检查here。
如果我删除输入：焦点行，则跳转不再发生（为什么？），请检查here。
如果我从输入中删除 border：1px solid #ccc; ，则边距消失（为什么???），请检查here。

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

底线：整个行为对我来说似乎完全不同，我希望CSS Sherlock Holmes可以对这里发生的事情有所了解。

Answer 1

问题在于编号列表。

您正在设置margin-top，并使线条高度大于文本本身。这通常很好但这使得数字大于输入框。

您正在强制使用<br />的新行，并且它们无法自然地浮动到它们应该的位置，因为之前的数字对于其“行”而言“太大”。

我很难解释它，但要修复它，你可以将line-height: 2;添加到输入框或你提到的任何修复，或者更好的是用有序列表替换它们。

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

Answer 2

意外行为是因为labels在同一个float上下文中运行，没有clear打破它。因此，当您告诉左边的第二个label到float时，它会找到上一个标签，从而“堆叠”到右侧。

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

br {
    clear: both;
}

无法解释的HTML / CSS行为

2 个答案: