Question

我创建了一个简单的jQuery Mobile页面 - 已将相关示例放在此处：

我不希望包含链接的li项目，在这种情况下，Phone H，Phone M和Phone W项目的格式与列表中的其他项目不同。目前，文本和链接被分割成单独的行，并且与其他项目相比具有不同的样式。

任何人都可以指出我需要更改以使其保持一致（CSS或JavaScript我认为？）。

非常感谢，史蒂夫

Answer 1

更改样式应解决问题。使锚到内联块。并给出适当的填充。

以下是修改后的代码。

<div data-role="page" id="details" data-add-back-btn="true"> 
    <div data-role="header">
    <a href="../page.php" data-icon="home" class="ui-btn-right">Home</a>
    <h1>Contact Details</h1>
    </div>
    <div  data-role="content">

    <ul data-role="listview" data-inset="true" data-dividertheme="b">
            <li>First Name: Tom</li>
            <li>Surname: Jones</li>
            <li data-icon="false" style="height:35px;padding-left:15px;font-size:14px">Phone H: <a href="tel:123 4567" style="display:inline-block;padding-left:0px">123 4567</a></li>
            <li data-icon="false" style="height:35px;padding-left:15px;font-size:14px">Phone W: <a href="tel:123 4567" style="display:inline-block;padding-left:0px">123 4567</a></li>
            <li data-icon="false" style="height:35px;padding-left:15px;font-size:14px">Phone M: <a href="tel:123 4567" style="display:inline-block;padding-left:0px">123 4567</a></li>
        </ul>

    </div>

</div>

</body>
</html>

Answer 2

删除格式化的另一种方法是将电话号码链接包含在div或span中，这样JQuery Mobile就不会将链接与列表项关联起来。

带链接的jQuery Mobile List格式

2 个答案: