我有一个按钮集,并且想设置每个按钮的宽度,以便它们可以具有相同的大小(即,如果我有 4 个按钮,每个按钮占元素的 25%)
基本上,该网站的左侧有一个表格,在该表格中我有 4 个选项。现在的情况是它没有使用 100% 的左列,所以看起来很糟糕。我希望让按钮集占据列的 100%,并且每个按钮共享 25% 的固定空间。
我尝试过 .css('width') 每个按钮元素,但没有什么区别。
我的代码看起来像这样:
<script type='text/javascript'>
$( function() { $("#task-sort").buttonset(); } );
</script>
<div id='task-sort'>
<input type='radio' name='task-sort' id='sort_all' checked><label for='sort_all'>All</label>
<input type='radio' name='task-sort' id='sort_inc'><label for='sort_inc'>Incomplete</label>
<input type='radio' name='task-sort' id='sort_com'><label for='sort_com'>Completed</label>
</div>
最佳答案
你可以这样做:
$("#task-sort").buttonset().find('label').css('width', '25%');
.buttonset()
之后你的 html 看起来像这样:
<div id="task-sort" class="ui-buttonset">
<input type="radio" name="task-sort" id="sort_all" checked="" class="ui-helper-hidden-accessible">
<label for="sort_all" class="ui-state-active ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" aria-pressed="true" role="button" aria-disabled="false"><span class="ui-button-text">All</span></label>
<input type="radio" name="task-sort" id="sort_inc" class="ui-helper-hidden-accessible">
<label for="sort_inc" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Incomplete</span></label>
<input type="radio" name="task-sort" id="sort_com" class="ui-helper-hidden-accessible">
<label for="sort_com" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false"><span class="ui-button-text">Completed</span></label>
</div>
然后你只需要设置新创建的 <label>
的宽度即可元素以获得您想要的效果,you can try out a demo here .
关于jquery - 如何在 jQuery 按钮集中的按钮上设置固定宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3073312/