Question

以下是我想要的非常详细的演示：

我希望将HTML保持为group1，并使用纯CSS将其设为group2。

我希望：

仅使用CSS。按钮的宽度应在CSS中定义;
这些按钮的父div不是固定宽度。
0按钮应位于中间（我所做的是放两个按钮并隐藏它们）
按钮应该一对一对齐，它们之间的边距相同。由于父div是灵活的，因此保证金应该是动态值。

我尝试了很多方法但未能达到完美的结果。有人可以放弃任何提示吗？谢谢！

＆＃13;

button{
width:27px;
height:27px;
margin:5px;
cursor:pointer;
}
.placeholder {opacity:0}

＆＃13;

<div class="group1">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>0</button>
</div>

<hr>

<div class="group2">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <br>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <br>
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <br>
  <button class="placeholder">0</button>
  <button>0</button>
  <button class="placeholder">0</button>
</div>

＆＃13;

Answer 1

最简单的方法是CSS网格：

＆＃13;

for (let i = 0; i <= 48; i++) {
  $("#P" + i).on("blur", function() {
    $("#X" + i).val(getExpireDate(this));
    calcEntryFee(this); // <- add it here
  });
}

＆＃13;

.group1 {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr); /*Or simply : 1fr 1fr 1fr*/
  grid-gap: 10px;
}

.group1 button:last-child {
  transform: translate(calc(100% + 10px));
}

button {
  width: 27px;
  height: 27px;
  cursor: pointer;
}

＆＃13;

Answer 2

这应该使用flexbox，您可以更改容器的宽度，项目将相应调整：

button{
  width: 27px;
  height:27px;
  cursor:pointer;
  margin-top: 5px;
  margin-bottom: 5px;
}

button:not(:nth-child(3n)) { 
  margin-right: calc((100% - 27px * 3) / 2);
}

button:last-child {
  margin-right: 0;
}
 
.group1 {
   display: flex;
   flex-wrap: wrap;
   justify-content: center; 
   width: 33%;
}

<div class="group1">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>0</button>
</div>

什么是迫使n个元素连续显示的最简单方法？

2 个答案: