Question

我尝试了以下代码：

<div>
    <div>
        <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true"></a>
        <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true"></a>
    </div>
    <div>${comment.value}</div>
</div>

它给了我以下结果：

Layout that I have

我想做以下事情：

Layout that I want

我尝试使用“ui-block-a”，“ui-block-b”类没有成功。

Answer 1

以下是一个有效的例子：http://jsfiddle.net/Gajotres/kLfxg/

它使用为jQuery Mobile构建的fluid960网格。

HTML：

        <fieldset class="container_12">
            <div class="grid_1"><a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true"></a></div>
            <div class="grid_11">This is some button text</div>     
        </fieldset>
        <fieldset class="container_12">
            <div class="grid_1"><a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true"></a></div>
            <div class="grid_11">This is some button text</div>     
        </fieldset>

CSS：

.grid_11 {
    line-height: 35px;
}

因为这是灵活的网格（如jQM原始网格），这条线将使其宽度固定：

.container_12 .grid_1 {
    width: 40px !important;
}

Answer 2

理论上，下面的代码应该这样做。

<div>
    <div style="float:left;">
        <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true"></a>
        <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true"></a>
    </div>
    <div>${comment.value}</div>
</div>

我建议使用css类而不是内联css，但样式标记应放在标题中。

<style>
    .left {float:left;}
</style>
<div>
    <div class="left">
        <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true"></a>
        <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true"></a>
    </div>
    <div>${comment.value}</div>
</div>

Answer 3

网格布局应该由ui-grid类包装。

<div class="ui-grid-a">
 <div class="ui-block-a">
   <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true">
   </a>
 </div>
 <div class="ui-block-b">Test Comment</div>
 <div class="ui-block-a">
  <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true">
  </a>
 </div>
</div>

JSfiddle：test

Answer 4

使用jquery mobile进行此操作的方法。正如我在问题中所说 - 尝试使用“ui-block-a”类，但我以错误的方式使用它 - 它应该既给嵌套块也给外部块。以下代码产生所需的行为：

<div class="ui-block-a">
    <div class="ui-block-a">
        <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true"></a>
        <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true"></a>
    </div>
    <div class="ui-block-a">${comment.value}</div>
</div>

另见answer using just css

Answer 5

您需要将文本放在代码中的按钮旁边，而不是在其下方。

<div>
    <div>
        <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true"></a> <span>${comment.value}</span>
        <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true"></a>
    </div>
</div>

您尚未展示自己的CSS，因此我不知道您是否需要更改其中的任何内容，但此代码会将您的文字放在正确的位置，以便您能够将其显示在旁边按钮。

如何在文本字段附近创建一列按钮

5 个答案: