Я использую несколько сеток 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>

Посмотрите эту демонстрацию здесь

Он показывает промежутки между кнопками, но мне нужна эта кнопка, чтобы покрыть все пространство. Мне нужны изменения только для этой сетки, так как на странице есть несколько сеток.

0
Anuj.T 11 Дек 2014 в 14:22

2 ответа

Лучший ответ

Как я уже упоминал в своем комментарии, обновите свой 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;
}

ДЕМО

1
Suresh Ponnukalai 11 Дек 2014 в 11:35

Хорошо, я нашел решение, как я хотел, с помощью ответа @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>

ДЕМО

0
Anuj.T 12 Дек 2014 в 04:21