How can we use data-inline="true" for the button type?

Question

Could anyone please tell me how can I use data-inline="true" to the button type in JQuery mobile ?

eg: <button type="submit" data-inline="true" data-theme="b">Save</button>

When I tried it's not working and it's working only for the anchor tag.

eg: <a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>

Answer 1

It can be done with a grid, but that solution don't look nice bacause there's always a big gap between input box and the button.

Then there's an another way, with a little css we can change everything to look more fluid:

Working example: http://jsfiddle.net/Gajotres/cbWHm/

HTML :

<!-- FIRST SOLUTION -->

<div id="hidden-wrapper">
    <input type="text" name="name" data-inline="true" id="basic" value=""  /> 
    <button type="reset" data-inline="true" data-theme="b">Reset</button>
</div>

<!-- SECOND SOLUTION -->

<div id="hidden-wrapper2">
    <div id="text-container">
        <input type="text" name="name" data-inline="true" id="basic" value=""  /> 
    </div>
    <div id="btn-container">
        <button type="reset" data-inline="true" data-theme="b">Reset</button>
    </div>        
</div>

CSS :

/* FIRST SOLUTION */
#hidden-wrapper .ui-input-text {
   width: 68% !important;
    display: inline-block !important;
}

#hidden-wrapper .ui-btn {
   width: 19% !important;
}

/* SECOND SOLUTION */

#text-container, #btn-container {
    display: inline-block;
    height: 40px;
}

#text-container {
    width: 70%;     
}

#btn-container {
    width: 28%;  
}

#btn-container .ui-btn {
    margin-top: -9px !important;
    width: 100% !important;
}

You only need to take care about button width, this example is made to accommodate your current button. In any other case modify first and second css style width.

Second solution is probably the best one.