如何在文本字段附近制作一列按钮答案

【问题标题】：How to make a column of buttons near the text field如何在文本字段附近制作一列按钮
【发布时间】：2013-02-05 16:00:33
【问题描述】：

我尝试了以下代码：

<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”类，但没有成功。

【问题讨论】：

标签： jquery html css jquery-mobile layout

【解决方案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;
}

【讨论】：

感谢为 jquerymobile 引用的 fluid960。看起来很不错。

【解决方案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>

【讨论】：

谢谢，它有效。我唯一不喜欢的微妙之处是实际上没有使用 jquery-mobile 功能。但也许因为它太小了所以没关系。
不错，没有使用JQuery mobile，但这是布局的事情，应该用css解决。

【解决方案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

【讨论】：

我实际上希望按钮组是与评论分开的 div。在这种情况下，按钮可能会相互分离：jsfiddle.net/dUv7g

【解决方案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

【讨论】：

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

【讨论】：