Question

这是一个表单，它非常适用于绝对的字段集

<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; }

现在结果非常糟糕，为什么现场设置现在会延伸到整个屏幕？

Answer 1

那是因为<fieldset>是块级元素。块级元素本质上需要占用其父元素的全宽。

应用position: relative; 不会影响它的块级布局。元素保留在正常的文档流中，这意味着一切都按预期工作。

应用position: absolute; 确实会影响它的块级布局。元素从正常文档流中取出，导致元素不占用任何空间。但它的内容确实占用了空间。因此，元素的维度有效地成为其内容所占用的空间。换句话说，它“收缩”到内容维度。

这是一个例子。

.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>

如果position = relative或absolute，为什么我的fieldsets的宽度变化如此之大？

1 个答案: