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

3 に答える 3

0

data-type="horizontal"ボタンに個別に追加してみてください。マニュアル 

 <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-27T17:34:19.893 に答える
0

これを行うには多くの方法がありますが、ここにその 1 つがあります。

<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-27T17:05:39.163 に答える
0

あなたはそれを微調整する必要があるかもしれません、そしてそれはハックです：

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-28T03:31:29.133 に答える