對齊容器中的按鈕

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選擇器不會將第一個按鈕向左移動，它們將完美對齊中心。