Jquery mobile 在jQuery Mobile Listview中，按钮是否可能具有链接的外观？

我正在尝试创建一个包含按钮和链接的混合列表视图。我是否可以对标记进行任何添加/调整，使按钮显示为与链接相同？在这个阶段，我将尽可能多地使用标记，而不是定制CSS（或JS！）

最重要的是：

发表


删除

我想要的是：

（来源：）

我似乎只能得到这个：

---

（来源：）

这里有一个方法

jQM 1.4

要获得右侧的箭头图标，请将class

ui btn ui btn icon right ui-icon-carat-r

添加到按钮：

<ul data-role="listview" data-inset="true">
    <li><a href="#">Edit</a>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Publish</button>
        </form>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Delete</button>
        </form>
    </li>
</ul>

这里有一个

jQM 1.3

如果您坚持使用jQM 1.3，那么它会稍微复杂一些：

<ul data-role="listview" data-inset="true">
    <li><a href="#">Edit</a>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Publish</button>
        </form>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow fakeLinkIcon">&nbsp;</span>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Delete</button>
        </form>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow fakeLinkIcon">&nbsp;</span>
    </li>
</ul>

.ui-li-static {
    padding: 0 !important;
}
.fakeLinkIcon {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -9px;
}
.ui-li-static form div.ui-submit{
    padding-right: 2.5em;
}
.ui-li-static form div.ui-submit {
    margin: 0;
    box-shadow: none !important;
    border: 0;
    text-align: left;
    border-radius: 0;
}
.ui-li-static form div.ui-submit .ui-btn-inner{
    padding-left: 15px;  
}
.ui-last-child form div.ui-submit {
     border-bottom-right-radius: 16px;   
     border-bottom-left-radius: 16px;   
}
.ui-first-child form div.ui-submit {
     border-top-right-radius: 16px;   
     border-top-left-radius: 16px;   
}

发表


删除


.ui-li静态{
填充：0！重要；
}
fakeLinkIcon先生{
位置：绝对位置；
右：10px；
最高：50%；
利润上限：-9px；
}
.ui li静态表单div.ui-submit{
右侧填充：2.5em；
}
.ui li静态表单div.ui-submit{
保证金：0；
盒影：无！重要；
边界：0；
文本对齐：左对齐；
边界半径：0；
}
.ui li静态表单div.ui-submit.ui btn内部{
左侧填充：15px；
}
.ui最后一个子表单div.ui-submit{
边框右下半径：16px；
边框左下半径：16px；
}
.ui第一个子表单div.ui-submit{
边框右上角半径：16px；
边框左上半径：16px；
}

---

Thks，太糟糕了，它不能只用标记来完成。相反，我选择了一个链接，显示该按钮具有防止错误更改资源的额外好处。

.ui-li-static {
    padding: 0 !important;
}
.ui-li-static form button {
    margin: 0;
    box-shadow: none !important;
    border: 0;
    text-align: left;
}

<ul data-role="listview" data-inset="true">
    <li><a href="#">Edit</a>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Publish</button>
        </form>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow fakeLinkIcon">&nbsp;</span>
    </li>
    <li>
        <form action="#">
            <button type="submit" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Delete</button>
        </form>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow fakeLinkIcon">&nbsp;</span>
    </li>
</ul>

.ui-li-static {
    padding: 0 !important;
}
.fakeLinkIcon {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -9px;
}
.ui-li-static form div.ui-submit{
    padding-right: 2.5em;
}
.ui-li-static form div.ui-submit {
    margin: 0;
    box-shadow: none !important;
    border: 0;
    text-align: left;
    border-radius: 0;
}
.ui-li-static form div.ui-submit .ui-btn-inner{
    padding-left: 15px;  
}
.ui-last-child form div.ui-submit {
     border-bottom-right-radius: 16px;   
     border-bottom-left-radius: 16px;   
}
.ui-first-child form div.ui-submit {
     border-top-right-radius: 16px;   
     border-top-left-radius: 16px;   
}