bHello我有一个关于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会引起冲突以及如何解决它,这很奇怪,因为我仅在同时影响导航栏的同时编辑网格了吗?

最佳答案

我的问题是,是否要让div填充100%,为什么还要更改jQuery Mobile的CSS?您可以只做一个3格,并将宽度设置为100%。

我建议您还原对jQuery Mobile的CSS所做的CSS修改,并为div添加自定义CSS。

更新资料

我在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%;
}


而不是更改jQuery Mobile的CSS,而是将更改后的代码添加为自定义CSS,然后将其导入代码中,并查看其行为。

关于css - jQuery Mobile CSS冲突,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16836201/

10-12 12:18
查看更多