Question

我创建了一个网页，其中有20个随机行格式的按钮。我想制作一个具有相当大空间的列格式，例如左边的一列和中间的另一列。请帮助我。

Answer 1

如果我清楚地理解你的问题，我希望你看起来像下面这个小提琴。如果您想使用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等我只需为所有添加填充。多数民众赞成。

如何在HTML中以5行4列的格式排列20个按钮，列之间有相当大的空间？

1 个答案: