字段集填充不与内部div一起使用

时间:2011-02-15 22:17:04

标签: css html css3 fieldset

所以我有html代码:

<fieldset>
     <legend>Log On</legend>

     <div class="altregrow">
          <label for="UserName">User name</label>
          <input type="text" value="" name="UserName" id="UserName">
     </div>

     <div class="regrow">
          <label for="Password">Password</label>
          <input type="password" name="Password" id="Password">
     </div>

     <div class="altregrow">
          <label for="RememberMe">Remember me?</label>
          <input type="checkbox" value="true" name="RememberMe" id="RememberMe">
     </div>

     <p class="right">
          <input type="submit" value="Log On">
     </p>
</fieldset>

我的css是:

fieldset {
margin: 0 10px 10px 10px;
padding: 10px;
width: auto;
border: 1px solid #333;
display: block;
}
fieldset p { margin: 0.5em 0 0 0; }
.regrow, .altregrow {
text-align: left;
padding: 7px 5px;
width: 100%;
margin-right: 10px;
overflow: auto;
}
.regrow input, .altregrow input {
float: right;
margin-right: 5px;
margin-top: 2px;
}
.altregrow {
background: url(bg2.png) repeat;
border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}

我试图得到它,因此在feildset内的div的右侧有10px的边距。边距权限不起作用,我试图让字段集具有不同的显示属性,但似乎没有任何效果。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

如果您从div中删除width:100%它可以正常工作。否则,您可以在fieldset上添加更多填充,或为margin-right添加input