jquery - jquery 移动 header 中的垂直控制组

Question

我想要在 jQuery 移动 header 右端的垂直控制组中放置两个按钮。无论我尝试什么，它们都是水平显示的，而不是垂直显示的，直到我在编辑时不小心添加了一个重复的 div 。 div 有一个 ui-btn-right 类。 如果我删除其中一个 div，它就会失败 - 如果我用另一个 div 替换一个 div，它就会失败。

我制作了一个 jsfiddle 来展示我的意思...主页和后退按钮是正确的 - 但只是因为顶部附近有两个重复的 div。

http://jsfiddle.net/Upland/szkk1jd8/

  <div data-role="header" data-position="fixed" class="head">
    <img alt="Logo" src="https://cottonbureau.com/img/products/3899_wlCS_80.jpg" class="HEADLOGO">
    <div class="ui-btn-right" >  
    <div class="ui-btn-right" >  
      <div data-role="controlgroup" data-type="vertical">
        <a href="#" data-role="button" class="headBut" data-icon="home">Home</a> 
        <a href="#" data-role="button" class="headBut" data-icon="back">Back</a> 
      </div>
    </div>
    </div>
      <div data-role="navbar">
      <ul>
        <li><a href="#">Option One</a></li>
        <li><a href="#">Option Two</a></li>
      </ul>  
    </div>
  </div> 

有什么想法吗？

Answer 1

我对你真正想做的事情有点困惑。如果您在删除重复的 div 后试图让 buttons 粘在 header 的 top-right 上，那么这里是解决方案 -

.HEADLOGO { padding-top: 10px; }
.headBut   { width: 45px; height: 15px; display:block !important;}
.STATIC-FOOTER { text-align: center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
<div data-role="page" id="ConsultantListing" data-title="Consultant Listing">
  <div data-role="header" data-position="fixed" class="head">
	<img alt="Logo" src="https://cottonbureau.com/img/products/3899_wlCS_80.jpg" class="HEADLOGO">
	<div class="ui-btn-right" >  
	  <div data-role="controlgroup" data-type="vertical">
	    <a href="#" data-role="button" class="headBut" data-icon="home">Home</a> 
	    <a href="#" data-role="button" class="headBut" data-icon="back">Back</a> 
	  </div>
	</div>
      <div data-role="navbar">
	  <ul>
	    <li><a href="#">Option One</a></li>
		<li><a href="#">Option Two</a></li>
  	  </ul>  
    </div>
  </div> 
  <div data-role="content">
    <h1>Heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero in augue lobortis aliquet vel eu diam. Sed nisl diam, eleifend fringilla quam et, interdum efficitur purus.</p>
  </div><!-- Content --> 
  <div data-role="footer" class="STATIC-FOOTER" data-position="fixed">
    Footer Text
  </div> 
</div>

变化是—— 1.删​​除重复的div，和 2. 在 .headBut 元素上添加了 display:block !important;