将按钮添加到标题右侧

问题描述：

我想在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>

答

使用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>

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

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

答

如果你要使用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>

答

在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

将按钮添加到标题右侧

相关推荐