如何将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按钮与链接对齐？

回答

相关问题