Css 在jQuery Mobile中设置Listview高度

我试图在jQuery移动站点listview中调整s的大小，但似乎在CSS中找不到合适的类。我基本上调整了页眉和页脚等元素的大小。。我有五个垂直堆叠的按钮，按钮和页脚下方有一个间隙

我只想将每个元素的高度设置为20%，这样就可以了，因为其中有五个元素嵌套在body content div中。有人知道jQuery移动CSS中控制这个的类吗？我似乎无法在搜索中找到此信息。以下是CSS的链接供参考：

谢谢

使现代化

---

我原本打算专门讨论按钮的“listview”。我最初的解释太宽泛了，但基本上我只是尝试调整所有按钮的大小。ui btn是您必须使用的类。但这个类不仅仅由按钮使用。其他jQuery移动组件（如listview）也使用它。因此，如果设置.ui btn的高度，您也会弄乱这些组件。所以最好只为这五个按钮定义一个单独的类，然后将该类的高度设置为20%。

如果您查看这些类，您可以自行决定如何选择LI元素，我将使用.ui li类，如果您希望确保只获取一个listview元素，则可以指定更详细的选择器：

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

以下是jQuery移动文档的一些示例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是my data role=page元素的id，my listview是data role=listview元素的id

---

这里有一个演示：

为什么这么复杂？这也会起作用

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

很简单：

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

---

你是说定义一个像Test这样的div类，然后在CSS中定义类似.button的东西{height:20%width:80%}；或者我想要什么？我只是试了一下，我觉得我在这方面做错了什么……我只是更新了我的问题，我意识到我原来的解释太宽泛了。我指的不是按钮。抱歉搞混了！啊，太好了。在尝试调整.ui内容类之前，我忘记了设置.ui内容类。jQuery移动框架应该自动应用.ui内容类。您还可以通过属性：[data role=content]以相同的元素为目标

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