我使用 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>
uj5u.com熱心網友回復：
通過在 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>uj5u.com熱心網友回復：
您可以<br />每 10 個專案插入一個新行 ( )。
<c:forEach var="loop" begin="1" end="40">
<c:choose>
(...)
<c:if test="${loop eq 0}">
<br />
</c:if>
</c:choose>
</c:forEach>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381930.html
上一篇：CSS溢位：隱藏不適用于按鈕
下一篇：僅當特定輸入為空時如何禁用按鈕？