两个单独的按钮列

Question

我想知道是否有人能告诉我如何空出6个按钮。我想要的是三个按钮位于顶部，而其他三个位于顶部。所以基本上它会是两排对齐的按钮。

我知道这看起来相当简单，但我很难与它一起。任何帮助真的很感激。谢谢。

Answer 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> 

Answer 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宽度播放和添加利润率/填充等。

Answer 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; 
}