Question

我想在jQuery移动标头右端的垂直控制组中使用两个按钮。无论我尝试什么，它们都是水平显示，而不是垂直显示，直到我在编辑时意外添加了重复的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

我对你真正想做的事感到困惑。如果您在删除重复的buttons后尝试top-right坚持header div，那么这就是解决方案 -

＆＃13;

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

＆＃13;

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

＆＃13;

变化是 - 1.删除重复的div，然后 2.在display:block !important;元素

上添加了.headBut

jquery移动标题内的垂直控制组

1 个答案: