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/