2012-04-12 171 views
11

我想在jQuery手机的标题右侧添加一个图标按钮。 我在自动左侧定位时遇到了问题。将按钮添加到标题右侧

这里是我的头:

<div data-role="header" data-position="inline"> 
    <h1>Resultaten</h1> 
    <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false" 
     data-direction="reverse" onclick="empty()" data-transition="slide" 
     data-iconpos="notext">home</a> 
</div> 

回答

16

使用class="ui-btn-right"或添加类ui-btn-right<a>

<div data-role="header" data-position="inline"> 
    <h1>Resultaten</h1> 
    <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false" 
     data-direction="reverse" onclick="empty()" data-transition="slide" 
     data-iconpos="notext" class="ui-btn-right">home</a> 
</div> 
+0

感谢您的快速回复。 – 2012-04-12 11:05:45

+1

我正好使用相同的类,但链接仍然在左侧,为什么? – Malloc 2014-03-27 16:36:39

2

如果你要使用class="ui-btn-right"<a>右对齐多个按钮会将所有按钮放在彼此顶部。相反,你可以在它周围包装一个div并向右浮动。

<div data-role="header" data-position="inline"> 
    <h1>Resultaten</h1> 
    <div style="float:right;"> 
     <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false" 
     data-direction="reverse" onclick="empty()" data-transition="slide" 
     data-iconpos="notext" class="ui-btn-right">btn 1</a> 
     <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false" 
     data-direction="reverse" onclick="empty()" data-transition="slide" 
     data-iconpos="notext" class="ui-btn-right">btn 2</a> 
    </div> 
</div> 
-1

在jQuery Mobile ver 1.2+中有一个数据属性,您可以使用data-iconpos="right"

<a href="#Home" data-role="button" data-icon="home" data-iconpos="right" data-iconshadow="false" 
    data-direction="reverse" onclick="empty()" data-transition="slide" 
    data-iconpos="notext">home</a> 

Official Documentation