将每行显示的按钮限制为 10 个

Posted 2023-03-25

【中文标题】将每行显示的按钮限制为 10 个

【英文标题】：limit buttons displayed per line to 10

【发布时间】：2022-01-06 00:47:00

【问题描述】：

我正在使用 forEach 显示 40 个按钮，但所有按钮都显示在一行中。 我想每行打印 10 个按钮。

这是示例代码。

<c:forEach var="loop" begin="1" end="40">
<c:choose>
  <c:when test='$fn:contains(list, loop)'>
<input type="button" value="$loop" disabled="disabled" />
 </c:when> 
  <c:otherwise>
       <input type="button" value="$loop"  >
    </c:otherwise> 
</c:choose>
</c:forEach>

【问题讨论】：

了解 CSS 并考虑不同的屏幕尺寸

【参考方案1】：

通过在 css 中使用网格。

对于您希望使用 10 倍自动（或 1fr）的列，将其分成 10 个自动大小的列（因此在这种情况下基本上等分）。列和行间隙对解决方案没有帮助，但它们的存在是为了更清晰的可见性。

.button-container 
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
  grid-column-gap: 7px;
  grid-row-gap: 7px;

<div class="button-container">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
</div>

【讨论】：

谢谢你，它正在工作。