当前位置：文江博客话题详情

标题右侧有多个按钮

发布于 2024-11-04 13:19:54 字数 151 浏览 0 评论 0原文

我希望标题栏右侧有多个按钮。文档说你可以使用 DIV 进行自定义，但是当我这样做时按钮没有正常的样式。有什么建议吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

静水深流 2024-11-11 13:19:54

上面的示例在标题上放置了多个按钮，但它们都位于标题的左侧。我认为您可以将按钮分组到一个控件组中，并将控件组放置在标题的右侧。也许是这样的：

 
  <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">  
     //have your button here
  </div>

希望这有帮助。

The above example puts more than buttons on the header but they are all positioned to the left of the header. I think you can group your buttons in a controlgroup and position the control the group to the right of the header. Maybe something like this:

 
  <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">  
     //have your button here
  </div>

Hope this helps.

回复收藏 0 原文

抚笙 2024-11-11 13:19:54

我就是这样做的，看起来很干净。

HTMLCSS

<div id="myHeader" data-role="header" data-theme="a">
    <span class="ui-title"></span>
    <div class="ui-btn-right">
        <a id="myButton1" class="headerButton" href="#" data-role="button"></a>
        <a id="myButton2" class="headerButton" href="#" data-role="button"></a>
    </div>
</div>

.headerButton {
    float: left;
    margin-right: 5px!important;
}

This is how I did it, seems clean.

HTML

<div id="myHeader" data-role="header" data-theme="a">
    <span class="ui-title"></span>
    <div class="ui-btn-right">
        <a id="myButton1" class="headerButton" href="#" data-role="button"></a>
        <a id="myButton2" class="headerButton" href="#" data-role="button"></a>
    </div>
</div>

CSS

.headerButton {
    float: left;
    margin-right: 5px!important;
}

回复收藏 0 原文

不羁少年 2024-11-11 13:19:54

我已经在页脚中看到了这一点（此处显示< /a>)，可能会给您提供有关标题或工具栏的想法

回复收藏 0 原文

感性 2024-11-11 13:19:54

您可以使用网格类。

<div class="ui-grid-a ui-btn-right">
        <div class="ui-block-a" ><a href="#" data-role="button" data-inline="true" >Button1</a></div>
        <div class="ui-block-b" ><a href="#" data-role="button" data-inline="true" >Button2</a></div>
</div>

You can use the grid class.

<div class="ui-grid-a ui-btn-right">
        <div class="ui-block-a" ><a href="#" data-role="button" data-inline="true" >Button1</a></div>
        <div class="ui-block-b" ><a href="#" data-role="button" data-inline="true" >Button2</a></div>
</div>

回复收藏 0 原文

夏花。依旧 2024-11-11 13:19:54

 <a href="#" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-icon-left 
    ui-btn-corner-all ui-shadow" data-rel="back" data-icon="cancel" 
    data-theme="a">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">Cancel</span>
      <span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
    </span>
 </a>

 <a href="#" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-icon-left 
    ui-btn-corner-all ui-shadow" data-rel="back" data-icon="cancel" 
    data-theme="a">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">Cancel</span>
      <span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
    </span>
 </a>

回复收藏 0 原文

~没有更多了~