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

【问题标题】：limit buttons displayed per line to 10将每行显示的按钮限制为 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 并考虑不同的屏幕尺寸

标签： html button dynamic jstl

【解决方案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>

【讨论】：

谢谢你，它正在工作。