gpt4 book ai didi

html - 无法解释的 HTML/CSS 行为

转载 作者:太空狗 更新时间:2023-10-29 12:36:50 25 4
gpt4 key购买 nike

我有一个简单的 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. 以上原文可见here .
  2. 如果我删除 body(或者甚至只删除 line-height: 26px; 部分!!),左边距消失(为什么?),检查here .
  3. 如果我删除 input:focus 行,跳转就不会再发生(为什么?),检查 here .
  4. 如果我从输入中删除border: 1px solid #ccc;,边距就没有了(为什么???),检查here .

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

底线:整个行为对我来说似乎完全陌生,我希望 CSS Sherlock Holmes 能够阐明这里发生的事情。

最佳答案

问题出在编号列表上。

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

您正在用 <br /> 强制换行而且它们不能自然地漂浮到它们应该在的位置,因为之前的数字对于它的“线”来说“太大”了。

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

如果还是不明白,试试设置border: 1px solid #000;在标签上,您会明白我的意思。

关于html - 无法解释的 HTML/CSS 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13566527/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com