html - 如何在 HTML 中以 5 行 4 列的格式排列 20 个按钮，并在列之间留出适当的空间？

Question

我创建了一个网页，其中有 20 个随机行格式的按钮。我想制作一种具有适当空间的列格式，例如左侧的一列和中间的另一列。请帮我解决这个问题。

Answer 1

如果我清楚地理解你的问题，我希望你看起来像下面的 fiddle 。如果您想使用 html，请参阅 this Fiddle使用 HTML:

#outer {
  width: 100%;
  text-align: center;
}
.inner {
  display: inline-block;
}
#outer2 {
  width: 100%;
  text-align: center;
  padding-top: 4px;
}
#outer2 .inner {
  display: inline-block;
}
#outer3 {
  width: 100%;
  text-align: center;
  padding-top: 4px;
}
#outer3 .inner {
  display: inline-block;
}
#outer4 {
  width: 100%;
  text-align: center;
  padding-top: 4px;
}
#outer4 .inner {
  display: inline-block;
}
#btndiv {
  margin: 100px 100px 100px 100px;
}

<div id="btndiv">
  <div id="outer">
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn2" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button class="msgBtnBack">button</button>
    </div>
  </div>

  <div id="outer2">
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn2" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button class="msgBtnBack">button</button>
    </div>
  </div>


  <div id="outer3">
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn2" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button class="msgBtnBack">button</button>
    </div>
  </div>

  <div id="outer4">
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn2" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button class="msgBtnBack">button</button>
    </div>
  </div>
</div>

您也可以使用与此相同的引导按钮，您的问题是通过使用 html 创建此按钮，所以我使用 html 完成了此操作。您可以根据需要添加自定义设计。

希望对你有所帮助。

额外填充:

#outer2 .inner {
    padding: 2px; 
}

可以添加padding-top、padding-right 等我只是为所有的添加填充。就是这样。