JQM Buttons in a row?

Question

i'm trying to get 7 buttons in a vertical row, on the left of my viewport in, the first 3 buttons look fine just need to move them down but then the other 4 are not inline with the top 3 heres my code,

<div class="ui-grid-b">
                   <div class="ui-block-a">
                        <div class="ui-block-a"><a href="#" data-role="button" data-theme="a" data-inline="true">btn1</a></div></div>
                        <div class="ui-block-a"><a href="#" data-role="button" data-theme="a" data-inline="true">btn2</a></div></div>
                        <div class="ui-block-a"><a href="#" data-role="button" data-theme="a" data-inline="true">btn3</a></div></div>
                <div class="ui-grid-b">
                   <div class="ui-block-a">
                        <div class="ui-block-a"><a href="#" data-role="button" data-theme="a" data-inline="true">btn4</a></div></div>
                        <div class="ui-block-a"><a href="#" data-role="button" data-theme="a" data-inline="true">btn5</a></div>
                        <div class="ui-block-a"><a href="#" data-role="button" data-theme="a" data-inline="true">btn6</a></div>
                        <div class="ui-block-a"><a href="#" data-role="button" data-theme="a" data-inline="true">btn7</a></div>

enter image description here

You don't need all those blocks, one `ui-grid` and one `ui-block` will do the job http://fiddle.jshell.net/Palestinian/564VX/ also, you can do them vertically using `data-role=controlgroup`. http://view.jquerymobile.com/1.3.1/dist/demos/widgets/buttons/#button-vertical-group — Omar, Jul 15 '13 at 23:27
yeah that doesent work for me it just puts them side by side on two rows, i'll attach screen now — Nathaniel Harman, Jul 16 '13 at 10:49
thats great its working but how can i move it down the page a few px's? without just using
's?? thanks allot :) — Nathaniel Harman, Jul 16 '13 at 14:27
its fine i've just used
's and it looks great, i would like to know how i can target each button via css — Nathaniel Harman, Jul 17 '13 at 17:22
Ok buddy :) give each one a class if you want. You will be using classes later on in JS to attach events for each button ;) — Omar, Jul 17 '13 at 18:26

score 1 · Answer 1 · answered Jul 17 '13 at 18:29

You need one ui-grid and one ui-block-a.

Demo

<div class="left-btns ui-grid-a">
  <div class="ui-block-a">
    <a href="#" data-role="button" data-theme="a" data-inline="true">btn1</a><br/>
    <a href="#" data-role="button" data-theme="a" data-inline="true">btn2</a><br/>
    .....
</div>

JQM Buttons in a row?

1 Answers1