html - anchor ，按钮不是通过相等的填充水平

Question

这个问题我想了很久。每当我通过标签或按钮标签在 html 中创建一个按钮并给 css 样式填充顶部，底部等于按钮。但是按钮仍然水平对齐。供引用查找图像。

如需更多引用，请查找 JS FIDDLE

代码如下:

a{
    display:inline-block;
    text-transform:uppercase;
    background:#1a8acf;
    padding:10px 20px;
    text-decoration:none;
    color:#fff;
    font-family: arial, tahoma, helvetica, sans-sarif;
}
button{
    border:none;
    padding:10px 20px;
    background:#14214d;
    color:#fff;
    font-family: arial, tahoma, helvetica, sans-sarif;
}

Answer 1

line-height 在这里很重要，较小的字体具有较小的默认 line-height。为两个元素设置相同的高度并调整小的直到它们相等。 line-height 也使字体居中。

// set line height
.line-height{
    line-height: 20px;
}

// remove some button default styles (Firefox)
button::-moz-focus-inner{
  padding : 0;
  border  : 0;
}

// using block elements and floating
a{
    float: left;
    display:block;

    text-transform:uppercase;
    background:#1a8acf;
    padding:10px 20px;
    text-decoration:none;
    color:#fff;
    font-family: arial, tahoma, helvetica, sans-sarif;
}

button{
    display: block;
    float: left;

    border:none;
    padding:10px 20px;
    background:#14214d;
    color:#fff;
    font-family: arial, tahoma, helvetica, sans-sarif;
}

JSFiddle