我只是在玩一些非常基本的 html,我正试图让自己陷入困境。上次我真正做任何事情时,结构明智的表格仍然是理想且占主导地位的。所以我正在使用 div。
<div style="text-align:center;">Please fill out the following information
<div>Name, email, or alias:</div>
<div><input type="text" id="user"></div>
<div>Master Password:</div>
<div><input type="password" id="pwdOne"></div>
<div>Re-enter:</div>
<div><input type="password" id="pwdTwo"></div>
</div>
结果是:
所以我做了一些挖掘并查看了一些格式化示例,然后重新将其改为:
<div style="text-align:center; clear: both;">Please fill out the following information</div>
<div style="float: left;">Name, email, or alias:</div>
<div style="float: right;"><input type="text" id="user"></div>
<div style="float: left;">Master Password:</div>
<div style="float: right;"><input type="password" id="pwdOne"></div>
<div style="float: left;">Re-enter:</div>
<div style="float: right;"><input type="password" id="pwdTwo"></div>
根据我的理解,这应该是正确的,但现在我得到:
如何在左右浮动时区分每个单独的 div,以便它们正确堆叠?
最佳答案
尝试添加一个 clear 类来清除 float ,就像这样 br
或 div
是一样的:
<div style="text-align:center; clear: both;">Please fill out the following information</div>
<div style="float: left;">Name, email, or alias:</div>
<div style="float: right;"><input type="text" id="user"></div>
<br class="clear">
<div style="float: left;">Master Password:</div>
<div style="float: right;"><input type="password" id="pwdOne"></div>
<br class="clear">
<div style="float: left;">Re-enter:</div>
<div style="float: right;"><input type="password" id="pwdTwo"></div>
<br class="clear">
.clear{
clear:both;
}
关于html - 如何设计 div float : left and right correctly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20035973/