jsfiddleに見られるように、凡例プロパティの直後に余分なスペースがあるという問題があります。なぜこれが起こっているのか、それを修正する方法を知っている人はいますか。
また、凡例 (つまり、色) とラベル (つまり、赤) の間にタブ サイズのスペースがあるように見えますが、これはなぜですか?
これが私の問題に関連するHTMLマークアップです
<form action="http://www.learningwebdesign.com/contest.php" method="POST">
<fieldset>
<legend>Color:</legend>
<fieldset id="colors">
<ul>
<li><label><input type="radio" name="color" value="Red">Red</label></li>
<li><label><input type="radio" name="color" value="Blue">Blue</label></li>
<li><label><input type="radio" name="color" value="Black">Black</label></li>
<li><label><input type="radio" name="color" value="Silver">Silver</label></li>
</ul>
</fieldset>
<fieldset id="features">
<legend>Features:</legend>
<ul>
<li><label><input type="checkbox" name="features[]" value="Sparkley laces">Sparkley laces</label></li>
<li><label><input type="checkbox" name="features[]" value="Metallic logo">Metallic logo</label></li>
<li><label><input type="checkbox" name="features[]" value="Light-up heels">Light-up heels</label></li>
<li><label><input type="checkbox" name="features[]" value="MP3-enabled">MP3-enabled</label></li>
</ul>
</fieldset>
</fieldset>
</form>
これが私の問題に関連するCSSマークアップです
ul {
list-style-type: none;
}
ul li {
clear:both;
}
form {
width: 40em;
border: 1px solid #666;
border-radius: 10px;
box-shadow: .2em .2em .5em #999;
background-color: #d0e9f6;
padding: 1em;
overflow: hidden;
}
label {
display: block;
float: left;
width: 10em;
text-align: right;
margin-right: .5em;
color: #04699d;
}
fieldset {
margin: 0;
padding: 0;
border: none;
}
legend {
display: block;
float: left;
width: 10em;
text-align: right;
margin-right: .5em;
color: #04699d;
outline: black dotted thin;
}
#features label, #colors label {
color: #000;
display: inline;
float: none;
text-align: inherit;
width: auto;
font-weight: normal;
background-color: inherit;
outline: black dotted thin;
}
#colors ul li {
display: inline;
margin-bottom: 0;
}
#features ul{
margin-left: 11em;
}
#features ul li{
margin-bottom: 0;
clear: none;
}