我试图将 2 个 div 彼此相邻 float ，我希望右边的 div 相对于它的父 div 留出边距，而左边的 div 显示在右边的 div 的边距前面。
下面的代码带有一些标签和输入字段。我给了 inputwrapper 一个 margin-left 220px 来垂直对齐输入字段，但它们没有。
所以我的问题是如何在不使用表格的情况下使这些输入字段垂直对齐？
提前致谢
代码片段:
* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
font-family: Geneva, sans-serif;
font-size: 13pt;
}
.registerwrapper {
border: 1px black solid;
height: auto !important;
width: 600px;
display: block;
padding: 10px;
margin: 50px auto;
}
.labelwrapper {
border: 1px red solid;
float: left;
display: block;
z-index: 100;
}
.inputwrapper {
border: 1px blue solid;
margin-left: 220px;
float: left;
display: block;
z-index: 1;
}
.row {
border: blueviolet 1px solid;
position: relative;
padding: 3px;
width: auto!important;
display: block;
overflow: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}<html>
<head>
<title></title>
<link rel="stylesheet" href="css/layout_register.css" />
</head>
<body>
</body>
<div class="registerwrapper">
<form action="" method="post">
<div class="row">
<div class="labelwrapper"><label for="username">Username:</label></div>
<div class="inputwrapper"><input type="text" name="username" id="username" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password">Choose a password:</label></div>
<div class="inputwrapper"><input type="password" name="password" id="password" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password_again">Enter your password again:</label></div>
<div class="inputwrapper"><input type="password" name="password_again" id="password_again" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="name">Name:</label></div>
<div class="inputwrapper"><input type="text" name="name" id="name" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="inputwrapper"><input type="submit" value="Register" /></div>
</div>
</form>
</div>
</body>
</html>最佳答案
position: absolute; 用于 labelwrapper 类。
* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
font-family: Geneva, sans-serif;
font-size: 13pt;
}
.registerwrapper {
border: 1px black solid;
height: auto !important;
width: 600px;
display: block;
padding: 10px;
margin: 50px auto;
}
.labelwrapper {
position: absolute;
border: 1px red solid;
float: left;
display: block;
z-index: 100;
}
.inputwrapper {
border: 1px blue solid;
margin-left: 220px;
float: left;
display: block;
z-index: 1;
}
.row {
border: blueviolet 1px solid;
position: relative;
padding: 3px;
width: auto!important;
display: block;
overflow: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}<html>
<head>
<title></title>
<link rel="stylesheet" href="css/layout_register.css" />
</head>
<body>
</body>
<div class="registerwrapper">
<form action="" method="post">
<div class="row">
<div class="labelwrapper"><label for="username">Username:</label></div>
<div class="inputwrapper"><input type="text" name="username" id="username" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password">Choose a password:</label></div>
<div class="inputwrapper"><input type="password" name="password" id="password" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password_again">Enter your password again:</label></div>
<div class="inputwrapper"><input type="password" name="password_again" id="password_again" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="name">Name:</label></div>
<div class="inputwrapper"><input type="text" name="name" id="name" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="inputwrapper"><input type="submit" value="Register" /></div>
</div>
</form>
</div>
</body>
</html>关于html - div 在另一个 div 的边缘， float div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32561098/