代码之家 › 专栏 › 技术社区 › Patrick

如何将HTML按钮与链接对齐?

css html

Patrick · 技术社区 · 14 年前

我试图将一个输入按钮与一个链接(类“button”)对齐,但是在Safari和Chrome中,顶部有一个像素差,我不知道为什么。

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;
}

有什么问题,我该怎么解决?

3 回复 | 直到 14 年前

RussellUresti 14 年前

移除填充,将高度设置为相同的值,调整两个浏览器的垂直对齐,然后对所有浏览器进行框大小调整。

下面是一个工作示例的链接。 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;
}

这段代码可以减少冗长,但你明白了。

Flatlin3 14 年前

附加 浮动:左; 在Chrome和Firefox中,这两个元素都解决了这个问题。您还可以添加 左边距:2倍; 到 .按钮 恢复使用此解决方案时按钮之间丢失的间隙。

Core Xii 14 年前

一个可能的罪魁祸首是过多的空格。不同的浏览器对HTML中的缩进和换行有不同的解释。您应该通过一个空白剥离函数输出所有的HTML。(作为奖励,它还可以节省带宽)

这就是我所做的,尽管它不能很好地使用JavaScript:

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

ob_start('ob_compress_html');

推荐文章