作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在寻找一个 jQuery 插件,让我创建一个按钮数组,我找到了 jQuery UI buttonset现在这个小部件非常接近我需要的,因为当时只能选中一个按钮,但现在问题来了:这个小部件是否提供了一种在一定行数中显示选项( radio )列表的方法?我问是因为我想得到如下图所示的结果:
这是一个 fiddle
和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"><</label>
<input type="radio" id="rela3" name="rela" value=">=" />
<label for="rela3">>=</label>
<input type="radio" id="rela6" name="rela" value="<=" />
<label for="rela6"><=</label>
<input type="radio" id="rela1" name="rela" value="=" />
<label for="rela1"> = </label>
<input type="radio" id="rela4" name="rela" value="<>" />
<label for="rela4"><></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"> Or</label>
</div>
</fieldset>
和js:
$("#pare").buttonset();
$("#arit").buttonset();
$("#rela").buttonset();
$("#logi").buttonset();
如有任何建议或指导,我们将不胜感激。
最佳答案
如果我理解你的问题是正确的,你想改变应用 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"><</label>
<input type="radio" id="rela3" name="rela" value=">=" />
<label for="rela3">>=</label>
<input type="radio" id="rela6" name="rela" value="<=" />
<label for="rela6"><=</label>
<input type="radio" id="rela1" name="rela" value="=" />
<label for="rela1"> = </label>
<input type="radio" id="rela4" name="rela" value="<>" />
<label for="rela4"><></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"> Or</label>
</div>
</div>
</fieldset>
CSS:
.left{
float:left;
}
.right{
float:left;
}
#arit{
width:100px;
}
#rela{
width:140px;
}
关于jQuery 将按钮集分成一定数量的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18944096/
我正在尝试开发右边框/Angular 具有特定 Angular (30°) 的表格。我见过一些类似的解决方案,但它们都无法在一定程度上发挥作用。如果我想从 30° 改变到 20°,我不想花太多力气。
我是一名优秀的程序员,十分优秀!