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>

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

谢谢

Answer 1

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

演示

标记

<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;
}

Answer 2

只需将块的float属性设置为leftand right。

#profile_navbar
{
    float:left;
    /* other stuff */
}
#profile_navbar_right
{
    float:right;
    /* other stuff */
}