0

bHello 我有一个关于 jQuery 移动 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 会导致这个冲突以及如何解决它，这很奇怪，因为我只在它影响导航栏的同时编辑网格？

4

1 回答 1

1

我的问题是，如果您希望您的 div 填充 100%，为什么还要修改 jQuery Mobile 的 css？您可以只做 3 个 div 并将宽度设置为 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 并将其导入您的代码并查看它的行为方式。

于 2013-05-30T12:33:20.257 回答