jquery - 我们如何使用 data-inline ="true"作为按钮类型？

Question

谁能告诉我如何使用data-inline="true" JQuery mobile 中的按钮类型？

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

当我尝试时，它不起作用，并且仅适用于 anchor 标记。

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

Answer 1

可以用网格来完成，但该解决方案看起来不太好，因为输入框和按钮之间总是有很大的间隙。

还有另一种方法，通过一点 css，我们可以更改所有内容，使其看起来更流畅:

工作示例: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;
}

您只需要关心按钮宽度，此示例是为了适应您当前的按钮而制作的。在任何其他情况下，修改第一个和第二个 css 样式宽度。

第二个解决方案可能是最好的。