android - 带有导航栏的标题内右对齐的 div 中断到另一行

Question

我正在努力尝试在标题中添加一个 div，并且导航栏的右边距变窄了:

<div data-role="header"> 
  <div id="profile_navbar" data-role="navbar">
    <ul>
      <li><a href="#">My Profile</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Settings</a></li>
    </ul>
  </div>

  <div id="profile_navb_right">
    <img src="http://i.imgur.com/aN396n8.png" />
    <img src="http://i.imgur.com/RAoRPLt.png" />
  </div>
</div>

在 #profile_navb_right 上用 css 尝试了很多东西，但它总是将第二个 div 清除到另一行:

谢谢

Answer 1

使用 ui-grid 响应式布局来解决您的问题。 ui-grid-a、ui-block-a 和 ui-block-b。此外，为 ui-grid 提供类或 ID 很重要，以免与其他 ui-grid 布局重叠。

Demo

标记

<div class="ui-grid-a navbar">
 <div class="ui-block-a">
  <div id="profile_navbar" data-role="navbar">
   <ul>
    <li><a href="#">My Profile</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Settings</a></li>
   </ul>
  </div>
 </div>
 <div class="ui-block-b">
  <div>
   <img src="img.png" />
   <img src="img.png" />
  </div>
 </div>
</div>

CSS

.ui-grid-a.navbar > .ui-block-a {
 width: 80% !important;
}

.ui-grid-a.navbar > .ui-block-b {
 width: 20% !important;
 text-align: center;
}