Question

我有一个链接和一个使用相同.button类设置的提交按钮。是否有一种简单的方法可以使它们看起来完全相同（具有相同的高度）？

＆＃13;

body .button {
    text-align: center;
    line-height: 15px;
    background: #3333CC;
    border-color: #5033CC;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    border: 1px solid;
    padding: 4px 7px 4px 7px;
    cursor: pointer;
    min-width: 90px;
    text-decoration: none;
    display: inline-block;
}

＆＃13;

<form>
<a class="button" href="http://www.example.org">Link as button</a>
<input class="button" type="submit" value="button as button"/>
</form>

＆＃13;

编辑：我刚刚发现它们在Google Chrome中看起来相同，但在Firefox中却看不到。

Answer 1

~~在此示例中，它们具有相同的高度（25像素）。您始终可以在CSS中设置高度。~~

~~您错过的一件事就是更改字体系列。~~

~~在这个例子中，我已经向Helvetica添加了一个，但这会使它们更相似。~~

您可以设置box-sizing:border-box，设置实体高度（在此示例中为25px），然后将display:inline-block;更改为float:left;

＆＃13;

body .button {
    text-align: center;
    line-height: 15px;
    background: #3333CC;
    border-color: #5033CC;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    border: 1px solid;
    padding: 4px 7px 4px 7px;
    cursor: pointer;
    min-width: 90px;
    text-decoration: none;
    float:left;
    font-family:'Helvetica';
    box-sizing:border-box;
    height:25px;
}

＆＃13;

<form>
<a class="button" href="http://www.example.org">Link as button</a>
<input class="button" type="submit" value="button as button"/>
</form>

＆＃13;

样式链接作为提交按钮

1 个答案: