jquery - jQuery将按钮集划分为一定数量的行

Question

我一直在寻找一个 jQuery 插件，它可以让我创建一组按钮，我发现jQuery UI buttonset 现在这个小部件非常接近我的需要，因为当时只能检查一个按钮，但现在问题来了：这个小部件提供了一种在特定行数中显示选项（收音机）列表的方法？？我问是因为我想得到如下图所示的结果：

这是一个小提琴

和HTML代码：

<fieldset>
    <legend>Operators</legend>
    <div id="pare">
        <input type="radio" id="pareA" name="pare" value="(" />
        <label for="pareA">(</label>
        <input type="radio" id="pareC" name="pare" value=")" />
        <label for="pareC">)</label>
    </div>
    <div id="arit">
        <input type="radio" id="arit1" name="arit" value="+" />
        <label for="arit1">+</label>
        <input type="radio" id="arit2" name="arit" value="-" />
        <label for="arit2">-</label>
        <input type="radio" id="arit3" name="arit" value="*" />
        <label for="arit3">*</label>
        <input type="radio" id="arit4" name="arit" value="/ " />
        <label for="arit4">/</label>
    </div>
    <div id="rela">
        <input type="radio" id="rela2" name="rela" value=">" />
        <label for="rela2">></label>
        <input type="radio" id="rela5" name="rela" value="<" />
        <label for="rela5">&lt;</label>
        <input type="radio" id="rela3" name="rela" value="&gt;=" />
        <label for="rela3">>=</label>
        <input type="radio" id="rela6" name="rela" value="&lt;=" />
        <label for="rela6">&lt;=</label>
        <input type="radio" id="rela1" name="rela" value="=" />
        <label for="rela1">&nbsp;=&nbsp;</label>
        <input type="radio" id="rela4" name="rela" value="<>" />
        <label for="rela4">&lt;&gt;</label>
    </div>
    <div id="logi">
        <input type="radio" id="logi1" name="logi" value="And" />
        <label for="logi1">And</label>
        <input type="radio" id="logi2" name="op" value="Or" />
        <label for="logi2">&nbsp;Or</label>
    </div>
</fieldset>

和js：

$("#pare").buttonset();
$("#arit").buttonset();
$("#rela").buttonset();
$("#logi").buttonset();

任何建议或指导将不胜感激。

Answer 1

如果我理解您的问题是正确的，您想更改应用 css 以更改图像中提到的 html。尝试使用以下内容更新您的 html 代码：

<fieldset>
    <legend>Operators</legend>
    <div class="left">
    <div id="pare">
        <input type="radio" id="pareA" name="pare" value="(" />
        <label for="pareA">(</label>
        <input type="radio" id="pareC" name="pare" value=")" />
        <label for="pareC">)</label>
    </div>
    <div id="arit">
        <input type="radio" id="arit1" name="arit" value="+" />
        <label for="arit1">+</label>
        <input type="radio" id="arit2" name="arit" value="-" />
        <label for="arit2">-</label>
        <input type="radio" id="arit3" name="arit" value="*" />
        <label for="arit3">*</label>
        <input type="radio" id="arit4" name="arit" value="/ " />
        <label for="arit4">/</label>
    </div>
        </div>
    <div class="right">
    <div id="rela">
        <input type="radio" id="rela2" name="rela" value=">" />
        <label for="rela2">></label>
        <input type="radio" id="rela5" name="rela" value="<" />
        <label for="rela5">&lt;</label>
        <input type="radio" id="rela3" name="rela" value="&gt;=" />
        <label for="rela3">>=</label>
        <input type="radio" id="rela6" name="rela" value="&lt;=" />
        <label for="rela6">&lt;=</label>
        <input type="radio" id="rela1" name="rela" value="=" />
        <label for="rela1">&nbsp;=&nbsp;</label>
        <input type="radio" id="rela4" name="rela" value="<>" />
        <label for="rela4">&lt;&gt;</label>
    </div>
    <div id="logi">
        <input type="radio" id="logi1" name="logi" value="And" />
        <label for="logi1">And</label>
        <input type="radio" id="logi2" name="op" value="Or" />
        <label for="logi2">&nbsp;Or</label>
    </div>
    </div>
</fieldset>

CSS：

.left{
    float:left;
}
.right{
    float:left;
}

#arit{
    width:100px;
}

#rela{
    width:140px;
}

DEMO FIDDLE