On the compilation of inline button and group button in jquery Mobile development _jquery

Inline button Data-inline=true
By default, all the buttons in the body content are called block-level elements, so they fill the width of the screen.

However, if you want to make the button look compact and the width only matches the text and icon inside it, add the data-inline= "true" attribute to the button.

If you have more than one button, you should sit on the same line shoulder by side and data-inline= the properties of "true" to each button. This will style the button to have its content width and float button to let them sit on the same line.

<a href= "index.html" data-role= "button" data-inline= "true" >Cancel</a>
<a href= "index.html" data-role= "button" data-inline= "true" Data-theme= "B" >Save</a>

Add data-mini= "True" to create a more compact version of the inline button:

<a href= "index.html" data-role= "button" data-icon= "delete" data-inline= "true" >Cancel</a>
<a href = "index.html" data-role= "button" data-icon= "Check" data-inline= "true" Data-theme= "B" >Save</a>

Group Button Data-role=controlgroup
Sometimes you want to put a set of buttons in a separate container so that they look like a separate navigation widget. You can wrap a set of buttons inside a container and add the data-role= "Controlgroup" attribute to the container, and Jquery mobile creates a vertical button group that removes the margin and shadows from the button. Then only the first button and the last button produce rounded corners, making them appear to be a group of buttons.

<div data-role= "Controlgroup" >
 <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>

Horizontal arrangement data-type= "Horizontal"

By default, the Group button behaves as a vertical list, and if you add the data-type= "horizontal" property to the container, you can convert to a list of horizontal buttons that are horizontal horizontally one by one and set only large enough to fit the width of the content. (so be careful not to have too many buttons on the horizontal, not too many buttons)

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

Mini version data-mini= "true"

<div data-role= "Controlgroup" data-type= "Horizontal" data-mini= "true" >
 <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>

Icon data-iconpos= "Notext" only

<div data-role= "Controlgroup" data-type= "Horizontal" data-mini= "true" >
 <a href= "index.html" data-role= "Button" data-icon= "Arrow-u" data-iconpos= "Notext" >Up</a>
 <a href= "index.html" data-role= "button" data-icon= "arrow-d" data-iconpos= "Notext" >Down</a> <a href= "index.html" data-role= "
 button" data-icon= "Delete" data-iconpos= "Notext" >Delete</a>
</div>