对齐容器中的按钮

Question

我不擅长前端（html，css等..）我想对齐容器中的一些按钮，如下所示。 cntainer将有一些标题和一些按钮。请把我拉出来。

在此先感谢。

Answer 1

你可以通过这个实现结果： -

HTML

<fieldset> 
<legend>Container Heading</legend> 
<button id="visit_return_button" type="submit">Button1</button> 
<button id="visit_return_button" type="submit">Button2</button> 
</fieldset> 

CSS

fieldset { 
    border:1px solid; 
    width:200px; 
    height:70px; 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
} 

legend { 

    margin-left:5px; 
} 

#visit_return_button{ 
    background-color:#9C8C42; 
    border: 2px solid #91782c; 
    color: #FFF; 
    text-align: center; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    padding: 10px; 
} 

或看演示： - http://jsfiddle.net/VY8xs/21/

Answer 2

我想用CSS的float选项来做到这一点。但有几种方法可以做到这一点。 您应该为每个按钮创建一个div，并使用css将它们正确对齐。

例如：

CSS

#button1{ 
float: left; 
margin-top: 10px; 
} 

#button2{ 
float:left; 
margin-top: 10px; 
margin-left: 10px; 
} 

HTML

<div id="container"> 
    <div id="button1"> 
     Your button HTML here 
    </div> 

    <div id="button2"> 
     Your button HTML here 
    </div> 
</div> 

Answer 3

jsfiddle example

<style> 
    div#container { 
    overflow:hidden; 
    border:1px solid #000; 
    width:200px; 
    position:relative; 
    padding:5px; 
} 

div#container > button { 
    float:left; 
    /*or float:right; */ 
} 

​ 
</style> 

<div>containing heading</div> 
<div id="container"> 
<button>submit</button> 
<button>cancel</button> 
</div>​ 

Answer 4

如果你有两个button元素，你想牛逼下摆中心 - 向他们的父母添加text-align: center。工作示例如下：http://jsfiddle.net/skip405/uvAcj/

如果要指定按钮之间的距离 - 只需将margin-left属性调整为您的需要即可。 button:first-child选择器不会将第一个按钮向左移动，它们将完美对齐中心。