组合 li、radio-input 和 label 时顶部没有填充答案

【问题标题】：No Padding at top when combine li, radio-input and label组合 li、radio-input 和 label 时顶部没有填充
【发布时间】：2014-03-10 20:01:25
【问题描述】：

我的 li 顶部的填充有问题。工作小提琴在这里：

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

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

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

问候约翰

【问题讨论】：

请发布您的 HTML 和 CSS 而不仅仅是 JSfiddle。
@Paulie_D 你复习问题的速度真的很快。
刚好在这里。 :)
删除   我认为。
您的<label>s 中有 s。删除它们，空白空间就消失了。

标签： html css input radio-button html-lists

【解决方案1】：

检查这个小提琴http://jsfiddle.net/TH3zq/11/。您没有在 css 中添加填充。相反，您在<li>s 中添加了 。我删除了   并在 css 中添加了填充，以便它在所有方面都成为唯一的填充。您可以在 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;
}

【讨论】：

【解决方案2】：

每个<li> 中都有一个  元素。删除这些，单选按钮上的“填充”就消失了。

【讨论】：

哦，好像有问题。我在 Wordpress 中编辑我的代码，例如：
Text A
Text A

没问题...进入你的 CSS 并抓住这些
标签，如下所示：li.a1.answer label br { display: none; } 对你的 CSS 选择器来说是这样的，应该确保 only
这些特定列表项中的标签不会显示。

看看选择器是如何工作的？首先获取具有 a1 和 answer 类的任何 li。在这些 li 中，抓住的。然后在其中，抓住
的。然后将这些元素的 display 属性设置为 none。

似乎 Mehar 下面的解决方案也可以。