【问题标题】: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 你复习问题的速度真的很快。
  • 刚好在这里。 :)
  • 删除 <br/> 我认为。
  • 您的<label>s 中有<br />s。删除它们,空白空间就消失了。

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


【解决方案1】:

检查这个小提琴http://jsfiddle.net/TH3zq/11/。您没有在 css 中添加填充。相反,您在<li>s 中添加了<br>。我删除了 <br> 并在 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】:

    每个&lt;li&gt; 中都有一个&lt;br&gt; 元素。删除这些,单选按钮上的“填充”就消失了。

    【讨论】:

    • 哦,好像有问题。我在 Wordpress 中编辑我的代码,例如:
    • 以及当我查看时会发生什么在边的源码中:
    • 为什么是这么??? Wordpress 会添加一个
      !?约翰
  • 没问题...进入你的 CSS 并抓住这些
    标签,如下所示:li.a1.answer label br { display: none; } 对你的 CSS 选择器来说是这样的,应该确保 only
    这些特定列表项中的标签不会显示。
  • 看看选择器是如何工作的?首先获取具有 a1answer 类的任何 li。在这些 li 中,抓住
  • 似乎 Mehar 下面的解决方案也可以。
  • 【解决方案3】:

    您在标签标签之后的 li 中添加了分页符标签。请删除它以解决问题。

    【讨论】:

    • Wordpress 是导致这个额外的
      -Tag!
    • 你想删除这个标签还是应用包含这个的css??
    • @John 你也可以通过给 li 元素添加 padding-bottom 来解决这个问题
    • 我要删除!还是有一个简单的 CSS 解决方案?
    • 好的! #content br {display:none;} 解决问题!谢谢大家!
    【解决方案4】:

    在您的标签标签之后删除您的 li 中的“br”标签。像这样

     <li class="a1 answer"><label>
      <input type="radio" name="q1" />Text A</label>
    </li>
    

    代替

     <li class="a1 answer"><label><br />
       <input type="radio" name="q1" />Text A</label>
     </li>
    

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签