为什么不'；jqueryui'；s按钮在低缩放级别下缩放良好？

我在上有一个布局示例，希望修复缩放级别为25%或33%时出现的溢出问题。按钮在任何其他缩放级别都可以很好地缩放，但在25%或33%时，按钮会溢出并覆盖其下方的元素。在这些缩放级别上，它们似乎也停止了缩放。解决此问题的最佳方法是什么

HTML:

JS:

---

我觉得这与您在div上设置的“宽度”值有关。如果我删除这些值，事情的大小确实会“更合适”。你可能想看看这个。这真的是你的用户将要缩小到33%和25%的一个主要问题吗？不，我怀疑这将是一个主要问题。但是我注意到很多网站的大小调整到了25%，我想知道这样做的正确方法是什么。此外，我不认为是宽度直接导致了问题。如果我将div加宽或完全删除width值，那么它会更好地调整大小，但也会破坏按钮的网格布局。必须有一个正确的方法来做到这一点。

<div id="checks">
  <input type="checkbox" name="checkboxes[]" id="1" value="1" /><label for="1">One</label>
  <input type="checkbox" name="checkboxes[]" id="2" value="2" /><label for="2">Two</label>
  <input type="checkbox" name="checkboxes[]" id="3" value="3" /><label for="3">Three</label>
  <input type="checkbox" name="checkboxes[]" id="4" value="4" /><label for="4">Four</label>
  <input type="checkbox" name="checkboxes[]" id="5" value="5" /><label for="5">Five</label>
  <input type="checkbox" name="checkboxes[]" id="6" value="6" /><label for="6">Six</label>
  <input type="checkbox" name="checkboxes[]" id="7" value="7" /><label for="7">Seven</label>
  <input type="checkbox" name="checkboxes[]" id="8" value="8" /><label for="8">Eight</label>
  <input type="checkbox" name="checkboxes[]" id="9" value="9" /><label for="9">Nine</label>
  <input type="checkbox" name="checkboxes[]" id="10" value="10" /><label for="10">Ten</label>
  <input type="checkbox" name="checkboxes[]" id="11" value="11" /><label for="11">Eleven</label>
  <input type="checkbox" name="checkboxes[]" id="12" value="12" /><label for="12">Twelve</label>
  <input type="checkbox" name="checkboxes[]" id="13" value="13" /><label for="13">Thirteen</label>
  <input type="checkbox" name="checkboxes[]" id="14" value="14" /><label for="14">Fourteen</label>
  <input type="checkbox" name="checkboxes[]" id="15" value="15" /><label for="15">Fifteen</label>
  <input type="checkbox" name="checkboxes[]" id="16" value="16" /><label for="16">Sixteen</label>
</div>

<span id="text">
  <label style="font-size: 12px">Text:</label>
  <input type="text" id="line" name="names[]" size="56" />
</span>

<span id="toggle">
  <label style="font-size: 12px">Toggle:</label>
  <input type="radio" id="one" name="radios[]" value="one" /><label for="one">ONE</label><input type="radio" id="two" name="radios[]" value="two" checked="checked" /><label for="two">TWO</label>
</span>

.ui-button .ui-button-text {font-size: 12px;}
#checks .ui-button {width: 140px; !important;}
#checks .ui-button {margin-bottom:3px; !important;}
#checks {position:absolute; top:0px; left:25px; height:120px; width:650px; border: 1px solid black;}
#text {position:absolute; top:140px; left:25px; height:50px; width:400px; border: 1px solid black;}
#toggle {position:absolute; top:140px; left:450px; height:50px; width:225px; border: 1px solid black;}

$("#toggle").buttonset();
$("#1, #2, #3, #4, #5, #6, #7, #8, #9, #10, #11, #12, #13, #14, #15, #16").button();