分組按鈕不適合全寬

<div data-role="header" id="commonHead"> 
    <div data-role="navbar"> 
     <h3 id="pageHeaderH1" alt="my root way to home" style="text-align:center;">myRWTH</h3> 
     <div data-role="controlgroup" data-type="horizontal"> 
      <a href="index.html" data-role="button">Yes</a> 
      <a href="index.html" data-role="button">No</a> 
      <a href="index.html" data-role="button">Maybe</a> 
     </div> 
    </div> 
</div>

這是我的代碼，但按鈕不適合內容的寬度，但左對齊。我不明白爲什麼我不會工作。有任何想法嗎？分組按鈕不適合全寬

更新：我不知道爲什麼，但它不會工作。我的解決辦法是這樣做的以下

<div data-role="header" id="commonHead" data-theme="b" > 
    <div data-role="navbar" data-iconpos="right"> 
     <h3 id="pageHeaderH1" alt="my root way to home" style="text-align:center;" data-mini="true">myRWTH</h3> 
     <ul>  
     <li><a href="#popupBasic" data-rel="popup" data-type="vertical" data-icon="gear" data-iconpos="bottom">Anzeigeoptionen</a>  
      <div data-role="popup" id="popupBasic" data-theme="b"> 
       <a id="ownPosition" data-role="button" data-icon="home" data-inline="true">Eigene Position</a> 
       <a id="ownPosition" data-role="button" data-icon="minus" data-inline="true">Mensen</a> 
       <a id="ownPosition" data-role="button" data-icon="minus" data-inline="true">HSP</a> 
       <a id="ownPosition" data-role="button" data-icon="minus" data-inline="true">Gebäude</a> 
       <a id="ownPosition" data-role="button" data-icon="minus" data-inline="true">Haltestellen</a> 
       <a id="ownPosition" data-icon="delete" data-icon="home" data-inline="true">Alle ausblenden</a> 
      </div> 
     </li> 
     </ul> 
    </div> 
</div>

來源

2012-09-27 MJB

您可能需要調整它，它是在一個黑客：

http://jsfiddle.net/kewRs/

JS：

// override the jQM CSS 
var cbnb = $('#customButtonNavbar'); 
var numberOfButtons = ($('.customButton').length > 0) ? $('.customButton').length:1; 
var widthOfButtons = (Math.round(100/numberOfButtons)); 

cbnb.children('.ui-controlgroup-controls').attr('style', 'width:100%;'); 
cbnb.children().children().attr('style', 'width:'+widthOfButtons+'%;');

HTML：

<div data-role="header" id="commonHead"> 
    <div data-role="navbar"> 
     <h3 id="pageHeaderH1" alt="my root way to home" style="text-align:center;">myRWTH</h3> 
     <div data-role="controlgroup" data-type="horizontal" id="customButtonNavbar"> 
      <a href="index.html" data-role="button" class="customButton">Yes</a> 
      <a href="index.html" data-role="button" class="customButton">No</a> 
      <a href="index.html" data-role="button" class="customButton">Maybe</a> 
     </div> 
    </div> 
</div>

來源

2012-09-28 03:31:29

方法很多，這裏有一個：

<div data-role="header" id="commonHead"> 
    <div data-role="navbar"> 
     <h3 id="pageHeaderH1" alt="my root way to home" style="text-align:center;">myRWTH</h3> 
     <div data-role="controlgroup" data-type="horizontal"> 
      <div style="width: 33%; float: left; text-align: center"> 
      <a href="index.html" data-role="button">Yes</a> 
      </div> 
      <div style="width: 33%; float: left; text-align: center"> 
      <a href="index.html" data-role="button" style="width: 33%">No</a> 
      </div> 
      <div style="width: 33%; float: left; text-align: center"> 
      <a href="index.html" data-role="button" style="width: 33%">Maybe</a> 
      </div> 
     </div> 
    </div> 
</div>

來源

2012-09-27 17:05:39

奇怪的是，導航欄現在被分成3個同樣大的部分，但按鈕本身仍然對齊到左側。現在，他們的「DIV」 – MJB

嘗試加入data-type="horizontal"的按鈕獨立。 Manual

<div data-role="header" id="commonHead"> 
<div data-role="navbar"> 
    <h3 id="pageHeaderH1" alt="my root way to home" style="text-align:center;">myRWTH</h3> 
    <div data-role="controlgroup" > 
     <a href="index.html" data-role="button" data-type="horizontal">Yes</a> 
     <a href="index.html" data-role="button" data-type="horizontal">No</a> 
     <a href="index.html" data-role="button" data-type="horizontal">Maybe</a> 
    </div> 
</div>

來源

2012-09-27 17:34:19

內部已經對齊了，他們沒有傷心地工作 – MJB

分組按鈕不適合全寬

回答

相關問題