html - 组合 li、 radio 输入和标签时顶部无填充

Question

我的 li 顶部的填充有问题。 工作 fiddle 在这里:

[http://jsfiddle.net/TH3zq/9/][1]

http://jsfiddle.net/TH3zq/9/

什么 CSS 样式可以解决这个问题？

问候 约翰

Answer 1

检查这个 fiddle http://jsfiddle.net/TH3zq/11/ .您没有在 css 中添加填充。相反，您添加了一个 <br>在<li>里面秒。我删除了 <br>并在 css 中添加了 padding ，这样它就会在所有方面成为唯一的 padding 。您可以在 css 中调整填充。

HTML

<div id="content">
  <ul>
    <li id="q1" class="main-group">Some Text Some Text Some Text
    <ul class="antworten">
      <li class="a1 answer"><label>
      <input type="radio" name="q1" />Text A</label></li>
      <li class="a2 answer"><label>
      <input type="radio" name="q1" />Text B</label></li>
      <li class="a3 answer"><label>
      <input type="radio" name="q1" />Text C</label></li>
      <li class="a4 answer last"><label>
      <input type="radio" name="q1" />Text D</label></li>
    </ul> 
    </li>
  </ul>
</div>

CSS

#content ul  {
  list-style: none; 
  margin:0;
  padding:0;
}

#content ul ul {
  margin: 0!important;
  padding: 10px 0!important;
}

#content ul ul li {
  list-style: none;  
  margin-bottom: 4px!important;
    padding: 10px;
}

#content ul ul li.last {
  margin-bottom: 0!important;
}

#content .answer {
  border: 1px solid #8A9839!important;
}

#content .main-group {
  border: 2px #F7AC1B solid;
  padding:10px!important;  
  margin-bottom:10px!important;
}