Grouped buttons don't fit the full width - html

Question

<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">
Yes
No
Maybe
</div>
</div>
</div>
This is my code but the buttons don't fit the content width, but are aligned to the left. I don't see why I wouldn't work. Any ideas?
UPDATE: I don't know why, but it wouldm't work. my workaround is the following
<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>Anzeigeoptionen
<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>

Answer 1

You might need to tweak it and it's a hack at that:
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">
Yes
No
Maybe
</div>
</div>
</div>​

Answer 2

Many ways of doing this, here's one:
<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">
Yes
</div>
<div style="width: 33%; float: left; text-align: center">
No
</div>
<div style="width: 33%; float: left; text-align: center">
Maybe
</div>
</div>
</div>
</div> ​

Answer 3

try adding data-type="horizontal" to the buttons individually. 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" >
Yes
No
Maybe
</div>
</div>