两列单独的按钮答案

【问题标题】：Two separate columns of buttons两列单独的按钮
【发布时间】：2014-03-31 23:58:55
【问题描述】：

我想知道是否有人可以告诉我如何间隔 6 个按钮。我想要的是使三个按钮位于顶部，而其他 3 个位于顶行下方。所以基本上它是两排独立的对齐按钮。

我知道这看起来很容易，但我很难做到。非常感谢任何帮助。谢谢。

【问题讨论】：

【解决方案1】：

你可以简单地做这样的事情：

<div id="button-wrapper">
    <div class="button-row">
        <input type="button" value="button1" />
        <input type="button" value="button2" />
        <input type="button" value="button3" />
    </div>
    <div class="button-row">
        <input type="button" value="button4" />
        <input type="button" value="button5" />
        <input type="button" value="button6" />
    </div>
</div>

【讨论】：

【解决方案2】：

你可以这样做

#top
{
width: 100%
}

#bottom
{
width: 100%;
}
.button
{
float: left
width: 33%;
}

<div id="top"> 

 <div class="button">
  <!-- code for button here -->
 </div>

 <div class="button">
  <!-- code for button here -->
 </div>

 <div class="button">
  <!-- code for button here -->
 </div>
</div>



<div id="bottom">
 <div class="button">
    <!-- code for button here -->
 </div>
 <div class="button">
    <!-- code for button here -->
 </div>
 <div class="button">
  <!-- code for button here -->
 </div>
</div>

您可以使用按钮 div 宽度并添加边距/填充等。

【讨论】：

没有hmtl标签有办法吗？

【解决方案3】：

为确保列对齐，您可以为每个列添加一个列类，并在该列类中指定一个宽度。

HTML：

<div id="button-wrapper">
    <div class="button-row">
        <input type="button" value="blah blah" class="c0"/>
        <input type="button" value="lorem ipsum" class="c1"/>
        <input type="button" value="really long button label" class="c2"/>
    </div>
    <div class="button-row">
        <input type="button" value="button4" class="c0"/>
        <input type="button" value="button5" class="c1"/>
        <input type="button" value="button6" class="c2"/>
    </div>
</div>

CSS：

.c0{
    width: 80px;
}
.c1{
    width: 100px;
}
.c2{
    width: 150px;
}

【讨论】：