使用 jQueryUI 时设置单选按钮的宽度

发布于 2024-09-14 22:57:21 字数 718 浏览 12 评论 0原文

我正在使用 jQuery UI 单选按钮，但找不到如何将它们全部设置为固定宽度。

我正在使用的代码是：

<script type="text/javascript">
    $(document).ready(function () {
        $("#radio").buttonset();
    });
</script>

<div id="radio">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">A</label>
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2 - long long</label>
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>

我是第一次使用 jQuery，并且几乎没有 CSS 或 javascript 经验。我尝试了各种奇怪的组合来尝试为按钮指定固定宽度而不丢失 jQuery UI 样式，但没有运气。

任何帮助将不胜感激。

原文

I am using jQuery UI radio buttons, and can't find how to set them all to be a fixed width.

The code I'm using is:

<script type="text/javascript">
    $(document).ready(function () {
        $("#radio").buttonset();
    });
</script>

<div id="radio">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">A</label>
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2 - long long</label>
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>

I am using jQuery for the first time, and have little CSS or javascript experience. I've tried all sorts of odd combinations to try and specify a fixed width for the buttons without losing the jQuery UI style, but have had no luck.

Any help would be appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

还如梦归 2024-09-21 22:57:21

您可以使用 设置显示的元素的宽度。 width(val) 像这样：

$("#radio").buttonset().find('label').width(200);

你可以在这里尝试一下，或者您也可以添加如下 CSS 规则：

#radio label { width: 200px }

您可以在此处尝试。

You can set the width of the <label> elements it's displaying using .width(val) like this:

$("#radio").buttonset().find('label').width(200);

You can give it a try here, alternatively you can just add a CSS rule like this:

#radio label { width: 200px }

You can try that out here.

回复收藏 0 原文

魂ガ小子 2024-09-21 22:57:21

以下适用于普通单选按钮和仅带有图标的单选按钮

.myradiolables
{
 width: 200px;
 height: 20px;
}

<div id="radio">
<input type="radio" id="radio1" name="radio" /><label class="myradiolabels" for="radio1">A</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label class="myradiolabels" for="radio2">Choice 2 - long long</label>
<input type="radio" id="radio3" name="radio" /><label class="myradiolabels" for="radio3">Choice 3</label>
</div>

The below works for normal radio buttons and ones with icons only

.myradiolables
{
 width: 200px;
 height: 20px;
}

<div id="radio">
<input type="radio" id="radio1" name="radio" /><label class="myradiolabels" for="radio1">A</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label class="myradiolabels" for="radio2">Choice 2 - long long</label>
<input type="radio" id="radio3" name="radio" /><label class="myradiolabels" for="radio3">Choice 3</label>
</div>

回复收藏 0 原文

~没有更多了~