jQuery Mobile CSS Conflict

Question

Здравствуйте, у меня есть вопрос относительно jQuery mobile css.

У меня есть страница, и внутри этой страницы у меня есть верхний и нижний колонтитулы. Теперь внутри содержимого у меня есть сетка, которая имеет несколько текстовых полей:

   <div data-role="page" id="calculator">



<div data-role="header" data-id="header">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html"  data-icon="b" data-inline="true" data-iconpos="notext"></a></li>
                    <li><a href="index.html"  data-icon="star" data-inline="true" data-iconpos="notext"></a></li>
                    <li><a href="index.html" data-icon="grid" data-inline="true" data-iconpos="notext"></a></li>
                    <li><a href="index.html" data-icon="search" data-inline="true" data-iconpos="notext"></a></li>
                </ul>
            </div><!-- /navbar -->
</div><!-- /header -->​

<div data-role="content">

<!-- below is the grid -->

<div class="ui-grid-b">
    <div class="ui-block-a"><div class="ui-bar ui-bar-c" style="height:65px">Afvallen:<input type="text" name="m1cut" id="m1cut" value=""></div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-c" style="height:65px">Onderhoud:<input type="text" name="m1onderhoud" id="m1onderhoud" value=""></div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-c" style="height:65px">Aankomen:<input type="text" name="m1bulk" id="m1bulk" value=""></div></div>
</div>

</div><!-- /content -->

    <div id="footer" data-role="footer" data-theme="b">
            <div data-role="navbar">
        <ul>
            <li><a href="#" class="top">Omhoog</a></li>
        </ul>
    </div>
    </div><!-- /footer -->

</div><!-- /page -->

Теперь, как правило, сетка разделяется на 3 части по 33/33/33 (%), но я тоже изменил ее на 100%, чтобы она накладывалась друг на друга. Я сделал это с помощью следующего CSS:

.ui-grid-b .ui-block-a,
.ui-grid-b .ui-block-b,
.ui-grid-b .ui-block-c,
.ui-grid-b .ui-block-d {
    width:100%; 
}

Теперь это работает как надо, но проблема, с которой я столкнулся сейчас, заключается в том, что я хочу, чтобы внутри заголовка была навигационная панель (как вы можете видеть в коде), но она также складывается и имеет ширину 100%. Когда я удаляю CSS для сетки, она работает отлично (25/25/25/25), но опять же, сетка 33/33/33 вместо 100 каждый, кто-нибудь знает, почему этот CSS вызывает этот конфликт и как его решить Это странно, потому что я редактирую сетку только тогда, когда она влияет на панель навигации тоже?

Answer 1

Мой вопрос: если вы хотите, чтобы ваши div-ы заполняли все 100%, зачем беспокоиться об изменении CSS jQuery Mobile? Вы можете просто сделать 3 деления и установить ширину 100%.

Я бы посоветовал вам отменить модификацию css, которую вы делали на css в jQuery Mobile, и добавить пользовательские css для своих элементов div.

Обновить

Я пробовал вашу проблему в jsfiddle и все работает нормально после изменения css тоже http://jsfiddle.net/jEYNy/

.ui-grid-b .ui-block-a,
.ui-grid-b .ui-block-b,
.ui-grid-b .ui-block-c,
.ui-grid-b .ui-block-d {
    width:100%; 
}

Вместо того, чтобы изменять CSS своего jQuery Mobile, добавьте измененный код как пользовательский CSS и импортируйте его в свой код и посмотрите, как он себя ведет.