有問題將HTML按鈕並排放置在一個表格中

我有一個問題得到我的HTML表單按鈕並排..有人可以看看，並告訴我什麼是錯的？它似乎應該默認情況下被放置在內聯中，但我想不是這種情況。

這是我的html代碼。

 <input type="submit" name="1" formtarget="" value="1"> 
     <input type="submit" name="2" formtarget="" value="2"> 
     <input type="submit" name="3" formtarget="" value="3"> 
     <input type="submit" name="4" formtarget="" value="4">

這裏是表單輸入個人姓名

#form input { 
position: relative; 
display: inline; 
margin: 0; 
padding: 0; 
border: none; 
outline: none; 
-webkit-box-shadow: none; 
box-shadow: none; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
text-shadow: none; 
line-height: 44px; 
-webkit-appearance: none; 
}

的CSS，這是因爲除了顏色的變化每個按鈕相同。

#form input[name="1"] { 
margin-top: 8px; 
height: 44px; 
width: 50%; 
background: #A901DB; 
border-bottom: 1px solid #B404AE; 
color: #FFF; 
font-size: 18px; 
text-align: center; 
} 
#form input[name="2"] { 
margin-top: 8px; 
height: 44px; 
width: 50%; 
background: #A901DB; 
border-bottom: 1px solid #B404AE; 
color: #FFF; 
font-size: 18px; 
text-align: center; 
}

有人可以幫我設置它，讓它們並排，並排嗎？

編輯：這就是它顯示。

http://jsfiddle.net/g01juc2z/2/

來源

2014-12-31 Ron LaPlante

它們對您來說是什麼樣的？他們似乎很好 –

似乎很好，我剛剛在Chrome中進行了測試。 –

除了100％寬度的按鈕，其他的並排http://jsfiddle.net/j08691/g01juc2z/。哦，等等，你是說你讓每個按鈕的寬度都是100％？ – j08691

您有4個元素設置爲width:50%它等於200％的寬度。他們更改爲width: 24%（inline-block元素爲1或2px的天然間距）以下，他們將對齊：

#form input[name="1"] { 
    margin-top: 8px; 
    height: 44px; 
    width: 24%; <--------------- 
    background: #A901DB; 
    border-bottom: 1px solid #B404AE; 
    color: #FFF; 
    font-size: 18px; 
    text-align: center; 
}

FIDDLE

來源

2014-12-31 04:08:34 jmore009

非常感謝。 –

不客氣。樂意效勞 – jmore009

在你的CSS使這些變化，你寫

[name="1"]

，取而代之的是

[type="submit"]

並且不重複名稱而另一個更改是

width:24%;

來源

2014-12-31 08:37:34 priya786

有問題將HTML按鈕並排放置在一個表格中

回答

相關問題