如何在不指定绝对宽度的情况下使用css围绕某些元素制作边框？

Question

我新的CSS和想提请解决此边框：

<form name="SomeForm" method="post" action="SomeAction"> 
    <fieldset> 
    <legend>Details</legend> 
    <div class="menu"> 
     <p><label for="UserName">Username</label><input name="UserName" id="UserName" type="text" value="#data[1].username#"></p> 
     <p><label for="Password">Password</label><input name="Password" id="Password" type="password" value="#data[1].password#"></p> 
     <p><label for="FirstName">First name</label><input name="FirstName" id="FirstName" type="text" value="#data[1].firstname#"></p> 
     <p><label for="LastName">Last name</label><input name="LastName" id="LastName" type="text" value="#data[1].lastname#"></p> 
    </div> 
    </fieldset> 
</form> 

这是我的CSS

fieldset { 
    background-color: #e1e1e1; 
    border: 1px solid #808080; 
} 

legend { 
    background-color: #e1e1e1; 
    border: 1px solid #808080; 
    border-left-width; 50%; 
    color: #0667ad; 
    font-style: italic; 
    font-weight: bold; 
} 

div.menu { 
    border: 1px solid #808080; 
    padding: 1px; 
    width: 271px; 
} 

p { 
    margin: 1px; 
} 

label { 
    border: 1px solid #e1e1e1; 
    background-color: #84b0d4; 
    color: #ffffff; 
    display: block; 
    float: left; 
    margin-right: 1px; 
    padding: 1px; 
    text-align: right; 
    width: 8em; 
} 

input { 
    background: #ffffff; 
    border: 1px solid #e1e1e1; 
} 

现在，我所定义的div宽度为271px。有没有一种方法来包围它包含的元素的边框而不指定绝对宽度？

Answer 1

从您的标签float: left，添加float: left你div.​​menu，并从div.menu删除width: 271px。

现在，当您从div.menu宽度折断的原因是因为标签向左浮动，而不是清除它们之上的输入。

编辑： 如果你想离开向左浮动将菜单中的结算规则添加到段落标签的另一个选项：

div.menu p { clear: both; } 

Answer 2

div.menu { 
    border: 1px solid #808080; 
    padding: 1px; 
    float: left; 
} 

和

<div class="menu"> 
    <p><label for="UserName">Username</label><input name="UserName" id="UserName" type="text" value="#data[1].username#"></p> 
    <p><label for="Password">Password</label><input name="Password" id="Password" type="password" value="#data[1].password#"></p> 
    <p><label for="FirstName">First name</label><input name="FirstName" id="FirstName" type="text" value="#data[1].firstname#"></p> 
    <p><label for="LastName">Last name</label><input name="LastName" id="LastName" type="text" value="#data[1].lastname#"></p> 
</div> 
<div style="clear: both;"></div>