[英]Jquery Mobile Collapsible Listview Align Text and Button
Here is what I'm doing: JsFiddle 这是我在做什么: JsFiddle
I want the word 'New' horizontally centered and the buttons "Something" and the Flipswitch vertically centered. 我希望单词“ New”水平居中,按钮“ Something”和Flipswitch垂直居中。
Is it possible? 可能吗?
I tried it but It doesn't work: 我试过了,但是不起作用:
<div data-role="collapsible" data-theme="b" data-inset="true" data-icon="false" style="text-align: center !important;">
<h2 style="text-align: center !important;">New</h2>
<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-right">
<a href="#" class="ui-btn ui-btn-b ui-li-count">Something</a>
</div>
<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-btn-right">
<select data-role="flipswitch">
<option value="Off">Off</option>
<option value="On" selected="selected">On</option>
</select>
</div>
I'm using Jquery Mobile 1.4 and Jquery 1.10.2, but I'm not so good with css. 我正在使用Jquery Mobile 1.4和Jquery 1.10.2,但是我对CSS不太满意。
Thanks advanced. 谢谢先进。
For buttons and flip switch, wrap each element in a span
with class ui-btn-right
to align it to right side. 对于按钮和翻转开关,请使用
ui-btn-right
类将每个元素包装在一个span
,以使其与右侧对齐。
<li data-icon="false">
<a href="#">Type 1</a>
<span class="ui-btn-right">
<a href="#" class="ui-btn ui-btn-b ui-mini">Something</a>
</span>
</li>
To center align collapsible's header, you need to override ui-collapsible-heading-toggle
. 要居中对齐可折叠标题,您需要覆盖
ui-collapsible-heading-toggle
。
Based on @ezanker's comment 基于@ezanker的评论
.ui-collapsible .ui-collapsible-heading-toggle {
text-align: center;
padding-left: 2.5em;
padding-right: 2.5em;
}
li > a.ui-btn {
padding-right: 120px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.