1

在我的jsfiddle中看到的 legend 属性之后，我遇到了一些额外的空间行问题。有谁知道为什么会发生这种情况以及如何解决它。

此外，图例（即颜色）和标签（即红色）之间似乎有一个制表符大小的空间，为什么会这样......？

这是我的问题的相关 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;
     }
4

2 回答 2

2

There is a margin in your ul element. Try

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

also I move the clear:both piece of code before everything else you define for ul and li.

于 2014-06-07T08:31:40.110 回答
1

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

ul {
    margin: 0;
    padding: 0;
}

在github/nomalize上使用 normalize.css 。这将完成上述和其他一些事情，这使得不同浏览器默认 css 在不同浏览器之间更加一致。 也许考虑不使用<ul><li>复选框和单选按钮。这些不是“真正的列表”，从我的角度来看，它们在语义上是矫枉过正的。但这取决于您个人对此的看法。

使用浏览器检查器查看实际使用的 css 值查看屏幕截图。

可以在这里看到包含 normalize.css 的正确 jsfiddle

于 2014-06-15T11:23:29.347 回答