这是一个表单,它与绝对定位的字段集配合得很好
<form name="register" method="post" action="login.php">
<fieldset id="login">
<legend><h4>Bent u reeds klant?</h4></legend>
<label> E-mailadres : </label><input name="mail" type="text" id="mail"><br>
<label>Password : </label><input name="pass" type="password" id="pass"><br>
<label></label><input type="submit" name="submit1" value="OK"><br>
<label></label><a href="passReset.php">Paswoord vergeten?</a><br>
</fieldset>
</form>
<form name="register" method="post" action="login.php">
<fieldset id="subscribe">
<legend><h4>Wordt nieuwe klant!</h4></legend>
<label>E-mailadres : </label><input name="mail" type="text" id="mail"><br>
<label></label><input type="submit" name="submit2" value="OK">
</fieldset>
</form>
这是我的第一个 CSS,可以正常工作
#login {
position: absolute;
top: 300px;
left:200px;
border: 1px black solid;
border-radius: 10px;
}
#subscribe{
position:absolute;
top: 300px;
left:550px;
border: 1px black solid;
border-radius: 10px;
}
label {
padding: 6px;
width: 6em;
display: inline-block;
}
现在我将位置从绝对位置更改为相对位置,字段集变得太宽了
#login {
position: relative;
top: 300px;
left:200px;
border: 1px black solid;
border-radius: 10px;
}
subscribe{
position:relative;
top: 300px;
left:550px;
border: 1px black solid;
border-radius: 10px;
}
label {
padding: 6px; width: 6em; display: inline-block; }
现在结果很糟糕,为什么现在字段集会延伸到整个屏幕?
最佳答案
那是因为 <fieldset>
是 block 级元素。 block 级元素本质上想要占据其父元素的完整宽度。
正在申请 position: relative;
不影响它的 block 级布局。该元素保留在正常的文档流中,这意味着一切都按预期进行。
正在申请 position: absolute;
确实影响它的 block 级布局。该元素从正常文档流中取出,导致该元素不占用任何空间。但是它的内容确实占用了空间。所以元素的尺寸实际上变成了它的内容占据的空间。换句话说,它“缩小”到内容维度。
这是一个例子。
.example-default {
background-color: yellow;
}
.example-absolute {
position: absolute;
background-color: lime;
}
<div class="example-default">Hello, I'm using <strong>relative</strong> positioning.</div>
<div class="example-absolute">Hello, I'm using <strong>absolute</strong> positioning.</div>
关于html - 如果 position = relative 或 absolute,为什么我的字段集的宽度变化如此之大?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29516672/