Question

我试图在我的jQuery移动网站（listview）中调整<li>的大小，并且似乎无法在CSS中找到合适的类来执行此操作。我基本上调整了一些元素（页眉和页脚等）的大小。我有五个<li>按钮垂直堆叠，按钮和页脚下方有一个间隙。

我只想将每个<li>的高度设置为20％（因为它有五个并且它们嵌套在一个正文内容div中，所以可以做到这一点。有没有人知道这个类在控制这个的jQuery Mobile CSS中？我似乎无法在搜索中找到这些信息。这里是CSS的链接以供参考：

jQuery Mobile Default CSS

谢谢！

更新

我原本打算讨论＆＃39; listview＆＃39;专门用于按钮。我的原始解释过于宽泛，但基本上我试图调整所有按钮的大小，而只调整<li> s。

Answer 1

如果你签出课程，你可以自己决定如何选择LI元素，我会使用.ui-li课程，如果你想确保只获得一个listview {1}}元素然后您可以指定更详细的选择器：

#my-listview-id > .ui-li {
    height : 20%;
}

以下是jQuery Mobile文档的一些示例listview输出：

            <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
                <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-top ui-btn-up-undefined">Overview</li>
                <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/intro.html" class="ui-link-inherit">Intro to jQuery Mobile</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
                <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/getting-started.html" class="ui-link-inherit">Quick start guide</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>  
                <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/features.html" class="ui-link-inherit">Features</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
                <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/accessibility.html" class="ui-link-inherit">Accessibility</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
                <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-c"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/platforms.html" class="ui-link-inherit">Supported platforms</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
            </ul>

<强>更新

这比我之前发布的更多，这里有一些测试/工作代码：

#my-page {
    height   : 100%;
    margin     : 0;
    padding    : 0;
}
#my-page .ui-content, #my-listview {
    min-height : 100%;
    height     : 100%;
    margin     : 0;
    padding    : 0;
}
#my-listview .ui-li {
    height : 20%;
}

其中#my-page是我的data-role="page"元素的ID，而#my-listview是data-role="listview"元素的ID。

以下是演示：http://jsfiddle.net/gu7WE/

Answer 2

.ui-btn是你必须使用的类。但是同一个类不仅仅用于“按钮”。其他jQuery Mobile组件如listview也使用它。所以如果你设置.ui-btn的高度你也会搞砸那些组件。所以最好定义一个单独的类，只为这五个按钮，然后将height设置为20%到该类。

Answer 3

为什么这么复杂？恕我直言，这也会成功。

#my-listview-id {
   height:100%;
}
#my-listview-id li {
    height: 20%;
}

Answer 4

这很简单：

.ui-li>.ui-btn-inner {
  padding-top: 10px
  padding-bottom: 10px
}

设置Listview <li> jQuery Mobile中的高度</li>

更新

4 个答案: