【问题标题】:How to remove padding and border around input tag in listview?如何删除列表视图中输入标签周围的填充和边框?
【发布时间】:2012-12-16 14:56:59
【问题描述】:

在 jQuery Mobile 中,我试图在列表视图项中放置一个复选框。我想删除顶部/左侧/底部的额外填充以及圆形边框。我希望保留锚标签的右箭头。

我设法通过清除锚标记的填充来删除其中的 一些。我曾尝试检查 Firefox 和 chrome 中的元素,但无法弄清楚是什么增加了空间。似乎输入标签导致了父级的更多填充。

<ul data-role="listview" data-inset="false" data-filter="true">
  <li>
    <a href="#">Normal item</a>
  </li>
  <li>
    <a href="#" style="padding-top:0px;padding-left:0px;padding-bottom:0px;">
      <fieldset data-role="controlgroup">
        <label ><input type="checkbox" name="checkbox-0" />With Checkbox</label>
      </fieldset>
    </a>
  </li>
  <li>
    <a href="#">Normal item</a>
  </li>
</ul>

这里有一个小提琴来演示:http://jsfiddle.net/HPGGk/7/

更新:我想我可能已经接近了。我确定字段集正在添加填充。我调整了边距,现在我只需要删除边框:http://jsfiddle.net/HPGGk/8/

【问题讨论】:

    标签: jquery jquery-mobile


    【解决方案1】:

    看看这个例子,我几周前做了一些其他的例子,但它们应该对你有用:

    示例 1:带有经典复选框的列表视图:

    https://stackoverflow.com/a/13564924/1848600

    示例 2:带有 jQ​​M 外观复选框的 Listview:

    https://stackoverflow.com/a/13634738/1848600

    最坏的情况给我发消息,我会重建你的例子。

    【讨论】:

    • 示例 2 就是我想要的。看来您必须重新实现 jQM 复选框。是因为我描述的问题吗?
    • 是的,因为你的问题,我需要一个快速修复,就是这样。
    • 我认为只有css才有可能。我刚刚发布了我的问题的更新。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-22
    • 1970-01-01
    • 1970-01-01
    • 2018-03-12
    相关资源
    最近更新 更多