jquery mobile listview没有填写列表的右侧部分

时间:2011-06-04 06:15:19

标签: jquery jquery-mobile

我有一个listview(右边​​没有图标),我想使用整个列表宽度。我不知道该怎么办。我右边有额外的空格???

这是jsFiddle:http://jsfiddle.net/fPt67/

第一个问题:我的段落文本没有包含在我的列表视图中

第二个问题:我没有成功使用整个列表宽度。右边总是没有使用空白区域。

谢谢。

3 个答案:

答案 0 :(得分:2)

我遇到了同样的问题,不仅是列表样式,还有其他JQM样式。创建自己的CSS样式似乎不够 - 您必须覆盖JQM样式。

在 JQM的css之后创建一个加载的.css文件,其中包含:

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
padding: .7em 15px .7em 15px;

}

从JQM beta 1开始,这将删除listviews右侧的额外填充(默认为75px)。

答案 1 :(得分:0)

嗯,你可以玩它,直到你按照你喜欢的方式得到它:http://jsfiddle.net/fPt67/12/

    <div data-role="page" id="page1" style="min-height:100%"> 

        <div data-role="header" data-position="inline" > 
        </div> 

        <div data-role="content"> 

            <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" style="white-space:normal"> 
                <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-e ui-corner-top">Paris</li> 
                <li class="custom_1">
                    <h3>
                    This is a description.
                    </h3>

                    <span class="custom_2">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </span>


              </li> 

           </ul> 

        </div> 

    </div> 

CSS

.custom_1 {
    margin:0px;
    padding:0px;  
}

.custom_2 {
    font-family:"Times New Roman", Times, serif;
    font-style:normal;
    font-size:10px; 
    margin:0px;
    padding:0px;
}

答案 2 :(得分:0)

我曾经有同样的问题,直到我意识到我在页脚中使用填充(那里没有合适的空间)。

只需删除页脚填充即可解决此问题。

覆盖列表样式将删除所有列表中的所有空格,顺便说一句。