Question

我在Jquery移动设备上有一个动态列表视图，但是它存在问题。我创建了自己的css文件，并尝试将css放在我的HTML文档中，但似乎没有注意到css。

这是CSS

#myList .ui-btn-inner {
text-align: center;
}

这是listView

<div data-role="mainPage" data-theme="a">

<div data-role="header">

</div>

<div style="width:500px;height:100px;background-color:white;"></div>

<div data-role="content">
 <ul data-role="listview" id="fixturesList">

    </ul>
 </div>
  </div>    
</div>

   '<li data-role="list-divider" data-theme="b">\ ' + oldDate + '\ </li><li id="myList" data-icon="false"><a href="javascript:void(0)'
    + '" onclick="goToMatchDetailPage(\''
    + match.Home +'\')">' 
    + match.Home + '\ v \ ' + match.Away 
    + '</a></li>';

第二段代码是js。

Answer 1

尝试添加此CSS（必须在加载jQM CSS文件之后）。

假设您有UL：

<ul id="theList" data-role="listview">

使用其ID将CSS的范围限制在此列表中：

#theList li a, #theList li.ui-li-divider {
    text-align: center !important;
}

如果您不需要以分隔符为中心，请删除逗号后面的部分

jQM 1.4 DEMO

jQM 1.3 DEMO

Answer 2

这有用吗？

刚刚在列表生成器模板中添加了一个居中类

CSS

.centered{text-align:center;}

JS

'<li data-role="list-divider" data-theme="b">\ ' + oldDate + '\ </li><li id="myList" 
class="centered" data-icon="false"><a href="javascript:void(0)'
+ '" onclick="goToMatchDetailPage(\''
+ match.Home +'\')">' 
+ match.Home + '\ v \ ' + match.Away 
+ '</a></li>';

在listview Jquery Mobile中居中文本

2 个答案: