Fieldset padding not working with inside divs
So I have the html code:
<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>
And my css is:
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;
}
I am trying to get it so there is 10px margin on the right side of the divs inside the feildset. The margin-right doesn't work, and I have tried to have the field开发者_JS百科set with different display attibutes but nothing seems to work. Any ideas?
if you remove the width:100%
from the divs it works. Otherwise you can add more padding on the fieldset
or add margin-right
for the input
.
精彩评论