Question

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

Answer 1

你的ul元素有一个余量。尝试

ul {
    margin-top: 0;
    list-style-type: none;
}

我还会在您为clear:both和ul定义的所有内容之前移动li段代码。

Answer 2

<ul>的浏览器默认css有margin和padding非零值。将这些设置为0。

ul {
    margin: 0;
    padding: 0;
}

~~使用github/nomalize上的normalize.css。这将执行上述和其他一些操作，这使得不同浏览器的默认css在不同浏览器之间更加一致。~~ 也许可以考虑不使用<ul><li>复选框和单选按钮。这些不是“真正的列表”，从我的观点来看，语义上是过度的。但这取决于你个人对此的看法。

使用浏览器检查器查看实际使用的css值See a screenhot。

可以看到包含normalize.css的正确jsfiddle here

摆脱图例属性后的空白区域

2 个答案: