我正在尝试创建一个包含按钮和链接组合的Listview。我可以对标记进行任何添加/调整以使按钮看起来与链接相同吗?在这个阶段,我正在尝试尽可能多地在标记中做,而不是自定义CSS(或JS!)
<ul data-role="listview" data-inset="true">
<li><a href="#">Edit</a></li>
<li>
<form action="#">
<button type="submit">Publish</button>
</form>
</li>
<li>
<form action="#">
<button type="submit">Delete</button>
</form>
</li>
</ul>
我想要的是:
Listview http://reb4.me/x/listview-20140410-194734.png
我似乎只能得到这个:
Listview bad http://reb4.me/x/listview-bad-20140410-194948.png
答案 0 :(得分:1)
这是一种方法。
jQM 1.4
要获取右侧的箭头图标,请将类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>
然后删除额外的填充,边框,阴影等添加此CSS:
.ui-li-static {
padding: 0 !important;
}
.ui-li-static form button {
margin: 0;
box-shadow: none !important;
border: 0;
text-align: left;
}
这是 DEMO
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"> </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"> </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;
}
<强> DEMO 强>