gpt4 book ai didi

html - CSS:多行 float 对齐不按预期工作

转载 作者:行者123 更新时间:2023-11-28 14:01:09 24 4
gpt4 key购买 nike

我的 html 文档中有多行,每一行都向左浮动。但是我的第二行没有正确地左对齐——很难解释,最好检查一下代码和 jsfiddle:

https://jsfiddle.net/0j8kd4c3/

<html>

<head>

<style>

label, input[type=text], button {
float: left;
}

</style>

</head>

<body>

<label for="input1">LABEL 1</label>
<input id="input1" type="text" />
<button type="button">BUTTON</button>

<br />

<label for="input2">LABEL 2</label>
<input id="input2" type="text" />

<br />

<label for="input3">LABEL 3</label>
<input id="input3" type="text" />

</body>

</html>

将第一行包裹在 div 容器中无济于事,那我该怎么办?

请注意,它再次适用于第 3 行,这让我感到困惑。

最佳答案

如果 float 只是您正在寻找的解决方案,那么您必须了解 CSS 的 clear 属性。 https://www.w3schools.com/cssref/pr_class_clear.asp

简单地说,在新行的 div 上应用 clear:both

这里是完整的解决方案:

<html>

<head>

<style>

label, input[type=text], button {
float: left;
}
.next{
clear: both;
}

</style>

</head>

<body>
<label for="input">LABEL 1</label>
<input id="input" type="text" />
<button type="button">BUTTON</button>

<div class="next"></div>
<label for="anotherInput">LABEL 2</label>
</body>

</html>

关于html - CSS:多行 float 对齐不按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57741583/

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