0

我试图弄清楚如何增加 jquery mobile 的搜索过滤器栏的大小。现在我有一个带有以下 ul 标签的内容 div：

<ul data-role="listview" id="alistview" data-inset="false" data-filter="true"></ul>

我的完整工作标题是：

<div data-role="page" id="aPage" data-hash="false">
    <div data-role="content">   
            <h3>Header</h3>     
        <ul data-role="listview" id="alistview" data-inset="false" data-filter="true"></ul>
    </div>
</div>

在我的 css 中，我都尝试过：

.ui-listview-filter{
    height: 10%;
    font-size 120%;
}

和：

#alistview .ui-listview-filter{
    height: 10%;
    font-size 120%;
}

但他们都没有工作。我很确定我使用了正确的样式类。当我在 Chrome 中对代码执行 ctrl-shift-j 时，它会显示搜索栏的一段代码，该代码段不在我的源代码中，我假设它是通过设置生成的。data-filter ="true"任何帮助将不胜感激！

4

3 回答 3

1

您的主要问题是使用height:百分比。来自MDN：

是相对于包含块的高度计算的。如果未明确指定包含块的高度，则该值计算为 auto。根元素（例如 ）上的百分比高度相对于初始包含块（其尺寸等于视口的尺寸）。

因此，最好a)设置 parent 的高度<div data-role="content">，或者b)将高度设置为像素量。

使用您的原始代码编辑输入周围区域的间距：

.ui-listview-filter {
    height: 100px;
}

jsfiddle 1

并从上面修改 Thanassis_K 的input代码，最好不要在 body 标签以外的元素上使用百分比字体大小。使用pxorem代替：

.ui-listview-filter input {
    height: 100px;
    font-size: 2em;
}

jsfiddle 2

于 2013-08-07T15:06:16.127 回答
0

您似乎在字体大小旁边的代码中缺少 :。尝试

.ui-listview-filter{
    height: 10%;
    font-size: 120%;
}

看看是否有帮助

于 2013-08-07T14:16:18.847 回答
0

如果我理解正确，您想增加<input>过滤栏内部的高度和字体大小，对吗？

然后你可以做类似的事情：

.ui-listview-filter input{
    height: 10%;
    font-size 120%;
}

JSFiddle

于 2013-08-07T14:28:26.570 回答