如何將HTML按鈕與鏈接對齊？

我試圖將輸入按鈕與鏈接（類「按鈕」）對齊，但在Safari和Chrome中，頂部有1像素差異，我無法弄清楚原因。如何將HTML按鈕與鏈接對齊？

alt text

<input class="button" name="commit" type="submit" value="Enrol" /> 
<a href="#" class="button" id="cancel">Cancel</a> 

input.button { 
    height: 38px; 
    font-size: 18px; 
    color: white; 
    font-weight: normal; 
    font-style: normal; 
    background: #4D28B2; 
    border: 1px solid gray; 
    padding: 5px; 
} 
a.button { 
    display: inline-block; 
    padding: 5px; 
    height: 24px; 
    font-size: 18px; 
    color: white; 
    text-decoration: none; 
    font-weight: normal; 
    font-style: normal; 
    text-align: left; 
    background-color: #4D28B2; 
    border: 1px solid gray; 
}

有什麼問題，我該怎麼解決呢？

來源

2010-11-24 Patrick

還應該包含您的HTML代碼。 – 2010-11-24 15:26:20

你可以在這裏看到效果：http://jsfiddle.net/sje397/R2Jzk/ – sje397 2010-11-24 15:34:31

刪除填充，將高度設置爲相同的值，調整兩者的垂直對齊，然後對所有瀏覽器進行框大小設置。

下面是一個工作示例的鏈接。 http://jsfiddle.net/cjXcp/5/

，代碼：

input.button { 
    height: 38px; 
    font-size: 18px; 
    color: white; 
    font-weight: normal; 
    font-style: normal; 
    background: #4D28B2; 
    border: 1px solid gray; 
    vertical-align: middle; 
    padding: 0px 5px; 
} 
a.button { 
    display: inline-block; 
    height: 38px; 
    font-size: 18px; 
    color: white; 
    text-decoration: none; 
    font-weight: normal; 
    font-style: normal; 
    text-align: left; 
    background-color: #4D28B2; 
    border: 1px solid gray; 
    vertical-align: middle; 
    line-height: 38px; 
    padding: 0px 5px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
}

該代碼可以在冗長降低，但你的想法。

來源

2010-11-24 15:48:13 RussellUresti

一個可能的罪魁禍首是多餘的空白。不同的瀏覽器不同地解釋HTML中的縮進和換行符。您應該輸出所有的HTML通過空白剝離功能。（作爲獎金，這也可以節省帶寬）

這是我做的，雖然它沒有發揮好使用JavaScript：

function ob_compress_html($str) 
    { 
    return preg_replace(array('{>\s{2,}<}', '{^\s+}', '{\s+$}D'), array('><'), $str); 
    } 

ob_start('ob_compress_html');

來源

2010-11-24 15:44:43

追加浮動：左;這兩個元素的解決了Chrome和Firefox中的這個問題。您也可以添加margin-left：2px;至。按鈕可以在使用此解決方案時恢復按鈕之間的空隙。

來源

2010-11-24 15:46:05 Flatlin3

如何將HTML按鈕與鏈接對齊？

回答

相關問題