Question

有人可以告诉我如何在JQuery mobile中使用data-inline="true"按钮类型？

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

当我尝试它时，它不起作用，它只适用于锚标记。

例如：<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样式宽度。

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

Answer 2

以下是使用grids的另一个示例。网格对这种情况很有用，因为它们具有响应性。方向改变时你不必担心。

Demo

标记

<div class="ui-grid-a">
 <div class="ui-block-a">
  <input type="text" name="" value="" />
 </div>
 <div class="ui-block-b">
    <button type="reset" data-theme="b">Reset</button>
 </div>
</div>

CSS

.ui-block-b {
 width: 25% !important;
}
.ui-block-a {
 width: 75% !important;
 padding-top: 3px !important; // to push down input box.
}

Answer 3

更新

您不能使用data-inline属性在同一行中混合按钮和文本输入。

取而代之的是use Grids。

<div class="ui-grid-a">
    <div class="ui-block-a"><input type="text" name="name" data-inline="true" id="basic" value=""  /> </div>
    <div class="ui-block-b" align="right"><button type="reset" data-inline="true" data-theme="b">Reset</button></div>
</div>

http://jsfiddle.net/mayooresan/ewaBd/1/

提供实时小提琴示例

旧答案

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

它的工作正常。

查看此 Live fiddle http://jsfiddle.net/mayooresan/BFWvG/

Answer 4

风格很好;检查@MayuMayooresan的小提琴，但如果你想href正在努力;这样做：

<a href="index.html"><button type="submit" data-inline="true" data-theme="b">Save</button></a>

看：http://jsfiddle.net/BFWvG/3/

我们如何对按钮类型使用data-inline =“true”？

4 个答案:

更新

旧答案