Question

我在页面中使用多个jQuery Mobile网格，我想删除网格之间的空间。

<div class="ui-grid-a">
    <div class="ui-block-a">
        <a href="#" data-corners="false" data-icon="alert" data-iconpos="top" data-role="button" onclick="click()">Button 1</a>
    </div>
    <div class="ui-block-b">
        <a href="#" data-corners="false" data-icon="star" data-iconpos="top" data-role="button" onclick="click()">button 2 </a>
    </div>
    <div class="ui-block-a">
        <a href="#" data-corners="false" data-icon="location" data-iconpos="top" data-role="button" onclick="click()">Button 3</a>
    </div>
    <div class="ui-block-b">
        <a href="#" data-corners="false" data-icon="info" data-iconpos="top" data-role="button" onclick="click()">button 4 </a>
    </div>
</div>

Check this demo here

它显示按钮之间的空格，但我需要该按钮来覆盖所有空间。我只想更改此网格，因为页面上有多个网格。

Answer 1

正如我在评论中提到的，更新你的CSS，如下所示，并根据父类定位。

 .ui-grid-a [class*=ui-block-]>.ui-btn, .ui-grid-a [class*=ui-block-]>.ui-select,  .ui-grid-a [class*=ui-block-]>.ui-checkbox,  .ui-grid-a [class*=ui-block-]>.ui-radio,  .ui-grid-a [class*=ui-block-]>button.ui-btn-inline,  .ui-grid-a [class*=ui-block-]>button.ui-btn-icon-notext
{
margin:0px;
}

DEMO

Answer 2

好的，我在@ Suresh的回答的帮助下得到了解决方案。

.no-margin-grid .ui-grid-a [class*=ui-block-]>.ui-btn, .ui-grid-a [class*=ui-block-]>.ui-select,  .ui-grid-a [class*=ui-block-]>.ui-checkbox,  .ui-grid-a [class*=ui-block-]>.ui-radio,  .ui-grid-a [class*=ui-block-]>button.ui-btn-inline,  .ui-grid-a [class*=ui-block-]>button.ui-btn-icon-notext
{
margin:0px;
}

只需将.no-margin-grid自定义类添加到css并定义额外的div。

<div class="no-margin-grid">
    <div class="ui-grid-a">
        <div class="ui-block-a">
        <a href="#" data-corners="false" data-icon="alert" data-iconpos="top" data-          role="button" onclick="click()">Button 1</a>
        </div>
        <div class="ui-block-b">
        <a href="#" data-corners="false" data-icon="star" data-iconpos="top" data-role="button" onclick="click()">button 2 </a>
        </div>
        <div class="ui-block-a">
        <a href="#" data-corners="false" data-icon="location" data-iconpos="top" data-role="button" onclick="click()">Button 3</a>
        </div>
        <div class="ui-block-b">
        <a href="#" data-corners="false" data-icon="info" data-iconpos="top" data-role="button" onclick="click()">button 4 </a>
        </div>
     </div>
</div>

<强> DEMO

如何删除jquery移动网格之间的空间？

2 个答案: