1

我尝试了以下代码：

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

它给了我以下结果：

我有的布局

我想做以下事情：

我想要的布局

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

4

5 回答 5

2

这是一个工作示例：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;
}
于 2013-02-20T15:33:29.423 回答
1

理论上，下面的代码应该做到这一点。

<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>
于 2013-02-20T15:30:29.113 回答
1

网格布局应按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：测试

于 2013-02-20T15:36:36.670 回答
0

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

另请参阅仅使用 css 回答

于 2013-02-21T12:10:57.357 回答
-1

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

<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，所以我不知道您是否需要更改其中的任何内容，但是此代码会将您的文本放在正确的位置，以便您能够在按钮旁边显示它。

于 2013-02-20T15:28:00.940 回答