在jQuery Mobile中设置Listview 高度。

I'm trying to resize the <li>s in my jQuery mobile site (listview) and can't seem to find the right class in CSS to do it. I've basically resized some of the elements (the header and footer, etc.). I have five <li> buttons stacked vertically and there is a gap below the buttons and the footer.

我正在尝试在我的jQuery移动站点(listview)中调整

s的大小，但似乎找不到合适的CSS类来实现这一点。我基本上调整了一些元素的大小(页眉和页脚等)。我有5个垂直堆叠的

年代的大小,但似乎找不到合适的CSS类来实现这一点。我基本上调整了一些元素的大小(页眉和页脚等)。我有5个垂直堆叠的

按钮，在按钮和页脚下面有一个空隙。

按钮,在按钮和页脚下面有一个空隙。

I just want to set each <li>'s height to 20% (that would do the trick since there is five of them and they are nested in a body content div. Does anyone know the class in the jQuery Mobile CSS that controls this? I can't seem to find this info in a search. Here's a link to the CSS for reference:

我只是想将每个

的高度设置为20%(这很有用，因为有5个，它们嵌套在body content div中。有人知道jQuery移动CSS中控制这个的类吗?)我似乎在搜索中找不到这个信息。这里有一个链接到CSS以供参考:

的高度设置为20%(这很有用,因为有5个,它们嵌套在正文内容div中。有人知道jQuery移动CSS中控制这个的类吗?)我似乎在搜索中找不到这个信息。这里有一个链接到CSS以供参考:

jQuery Mobile Default CSS

jQuery移动默认CSS

Thanks!

谢谢!

UPDATE

I was originally meaning to discuss 'listview' exclusively for the buttons. I was too broad in my original explanation but basically I'm trying to resize not all buttons but just the <li>s.

我原本打算专门讨论“listview”按钮。我原来的解释太宽泛了，但基本上我不是要调整所有按钮的大小，只是调整

s。

年代。

4 个解决方案

#1

If you check-out the classes you can make your own decision about how to select the LI elements, I would use the .ui-li class and if you want to make sure to only get one listview element then you can specify a more detailed selector:

如果你检查类，你可以自己决定如何选择LI元素，我会使用。ui- LI类，如果你想确保只有一个listview元素，你可以指定一个更详细的选择器:

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

Here is some sample listview output from the jQuery Mobile docs:

以下是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>

UPDATE

更新

There was a little more to this than I had previously posted, here is some tested/working code:

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

#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%;
}

Where #my-page is the id of my data-role="page" element and #my-listview is the id of the data-role="listview" element.

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

Here is a demo: http://jsfiddle.net/gu7WE/

这里有一个演示:http://jsfiddle.net/gu7WE/。

#2

.ui-btn is the class you have to use.But this same class is used not just by "buttons" alone .Other jQuery Mobile components like listview also make use of it.So if you set the height of .ui-btn you will mess up those components too.So it is better to define a separate class,only for those five buttons and then set the height to 20% to that class.

.ui-btn是您必须使用的类。但同样的类不仅仅用于“按钮”，像listview这样的jQuery移动组件也利用了它。所以如果你设置。ui-btn的高度你也会把这些组件搞砸。所以最好是定义一个单独的类，只针对这五个按钮，然后将高度设置为20%。

#3

Why so complicated? This would do the trick too IMHO.

为什么这么复杂?这一招也会奏效。

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

#4

It is simple as that:

很简单:

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

#1