Как удалить пространство между мобильной сеткой jQuery?

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>

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

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

css jquery-mobile

0

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

1

Ты так выглядишь? jsfiddle.net/9wtkmw69/3

–

Suresh Ponnukalai

11 Дек 2014 в 14:25

Да, я ищу то же самое.thx :), но только один вопрос, если я напишу этот собственный CSS, чтобы он переопределял CSS jqm по умолчанию, и вся сетка будет показывать результат, подобный этому.?

–

Anuj.T

11 Дек 2014 в 14:28

Используйте родительский селектор .ui-grid-a в css. Так что это повлияет только на этот div.

–

Suresh Ponnukalai

11 Дек 2014 в 14:32

Я обновил свою скрипку и опубликовал ее как ответ.

–

Suresh Ponnukalai

11 Дек 2014 в 14:36

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;
}

ДЕМО

1

Suresh Ponnukalai 11 Дек 2014 в 14:35

Спасибо за быстрый ответ @suresh. но применение этого эффекта применяется ко всей сетке на странице. я просто хочу, чтобы конкретная сетка вступила в силу. ссылка

–

Anuj.T

11 Дек 2014 в 14:58

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>

ДЕМО

0

Anuj.T 12 Дек 2014 в 07:21

Как удалить пространство между мобильной сеткой jQuery?

2 ответа

Похожие вопросы

Новые вопросы

css