CSS排列按鈕元素（HTML）

我在此鏈接中有我的CSS和html表單。 http://jsfiddle.net/qLgCX/1/如何在下面的輸出中在同一行中創建「更新」和「重置」按鈕？我使用相同的CSS爲少數其他HTML只包含1個提交按鈕。我擔心改變CSS也會影響它們。 enter image description here CSS排列按鈕元素（HTML）

enter image description here

#stylized button{ 
clear:both; 
margin-left:150px; 
width:125px; 
height:31px; 
background:#666666 url(img/button.png) no-repeat; 
text-align:center; 
line-height:31px; 
color:#FFFFFF; 
font-size:11px; 
font-weight:bold; 
}

來源

2013-05-21 Jill448

您應該將每一行放在段落中，而不是使用'
'。然後你可以添加一個'.contains-btn'類到最後一個，並且很容易''text-align：center'它的內容。並在其內部爲每個按鈕使用內聯塊。是否有一個或兩個人不會改變他們的居中（如果這是所需的風格）編輯：我不會提供小提琴，因爲該網站不會讓我通過鍵盤或鼠標複製HTML代碼... – FelipeAls

http://jsfiddle.net/qLgCX/10/

該解決方案不會影響您的其他形式。但是，它確實需要對HTML進行一些修改，即向按鈕添加一個類。

我修改HTML：

<button type="submit" class="custom-submit" >Update</button> 
<button type="reset" class="custom-reset">Reset</button>

我添加的CSS：

#stylized button.custom-submit, #stylized button.custom-reset { 
    float: left; 
    clear: none; 
    margin-left: 50px; 
}

或者，如果你想更有效地做到這一點，你只需要一個類：

<button type="submit" class="UpdateReset" >Update</button> 
<button type="reset" class="UpdateReset">Reset</button>

而你可以應用CSS只有一次，沒有任何家長在選擇：

.UpdateReset { 
    float: left; 
    clear: none; 
    margin-left: 50px; 
}

來源

2013-05-21 18:37:03 Michael

哇，在類選擇器中使用標籤名稱，聲明兩次相同的CSS，並使用'float'。我不在乎你沒有選擇我的答案，我擔心這些低效和古老的編碼習慣是作爲答案提供的。我們不能只提供可行的答案，我們需要提供良好的答案，並教導人們如何以正確的方式進行編碼。 – PlantTheIdea

@PlantTheIdea - Float是完成這件事的完全合理的方法。他還需要完成請求而不破壞其他只有一個按鈕的表單，在這種情況下，您的解決方案會中斷。在只有一個按鈕而不是兩個按鈕的情況下，它不能使按鈕居中。因此，具體的風格規則來解決他的具體問題。考慮到他有其他幾種形式，只有一個按鈕，這是唯一一個有兩個按鈕的形式，以上是一個完全合理的解決方案，如果他這樣選擇，他可以組合選擇器。 – Michael

坦率地說，以上是比以下其他兩個答案更好的解決方案。（不包括你的）。 – Michael

你可以試試顯示：inline-block的在CSS的按鈕。，如果你不打算做它，如果你想只在這個particu按鈕的所有按鈕（IE）; AR頁面進行水平對齊，然後給一個id爲包含按鈕的股利和再定義的CSS爲

#divid #stylizedbtn{ 
display:inline-block; 
}

對不起，我一開始並沒有看到小提琴。

請試試這個： 1.去除的
標籤的第一個按鈕

<button style="display:inline-block" type="submit">Update</button> 
<button style="display:inline-block" type="reset">Reset</button><br><br>

後

個人改變你的CSS

#stylized button{ 
margin-left:50px; //some lesser value than 150px 
}

來源

2013-05-21 18:30:05 gaurav5430

，我發誓inline-block。我也必須修改margin-left，並刪除您使用的<br>。以下是更新版本：

http://jsfiddle.net/qLgCX/3/

我可以花一個星期優化它的其餘部分（也有更容易，更可擴展的方式做你做了什麼），但是這應該解決您的具體問題，而不干涉太多在你現有的代碼上。按你們的要求

來源

2013-05-21 18:30:28 PlantTheIdea

你可以嘗試添加一個新的樣式類：

.mybutton { margin-left:20px !important;}

並將其應用到你的按鈕

see my Fiddle update

<button type="submit" class="mybutton">Update</button> 
<button type="reset" class="mybutton">Reset</button><br><br>

（我也在提交後刪除了換行符標籤）

來源

2013-05-21 18:46:43

這不會把按鈕放在同一行。 – Michael

對不起，我保存的「jsFiddle」沒有將class =「mybutton」應用於重置。如果您將該代碼添加到代碼中，它應該可以工作。（http://jsfiddle.net/qLgCX/14/） –

CSS排列按鈕元素（HTML）

回答

相關問題