Question

所以我有一个基本的按钮类，它将相同的样式应用于网站上的各种按钮。

我不得不最后放置一个表单输入和一个彼此相邻的锚标签，它们的高度和宽度是不同的。我已经使内部按钮文本在每一个上都相同，只是为了显示差异（就像我一样，显然我不需要2个'添加'按钮彼此相邻：P）

我不想在CSS中指定宽度或高度，因为内容会发生变化。即使字体的大小也略有不同，从盒子模型来看，它看起来就像填充一样。

标记

<form id="" method="POST" action="">
<input class="button" type="submit" name="submit" value="Add">
</form>

<a class="button" href="">Add</a>

CSS

.button {
    font-family: Arial;
    background: linear-gradient(to bottom, #FCB97E 0%, #F07605 100%) repeat scroll 0 0 transparent;
    border: 1px solid #F07605;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 13px;
    outline: medium none;
    padding: 5px 8px !important;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: baseline;
}

编辑： 正如您在下面看到的那样，它不是填充，因为firebug中的盒子模型显示每个填充的填充是相同的，所以它与实际元素本身有关的东西

Box model for input and anchor

如何从上面的js小提琴中的单个CSS类中获得两个相同的维度？

Answer 1

要完全均衡“button-ish”<a>主播input以及最近button，最好同步他们的广告素材：

input和button由于历史原因仍然处于怪癖模式（分别为现代模式box-sizing: border-box），其余模式为box-sizing: content-box模式...（或者方式：必须采用相同的模式或通过差分填充来补偿相等的高度

当我开始为网站设计样式时，这是我的标准“测试”：

__AA__
<button id='button'>plain Button</button>
<a class='button' href='#'>plain Anchor</a>
<a class='button'>linkless Anchor</a>
<input class='button' type='submit' value='Input Button' />
__BB__

此CSS（以stylus表示法）是一个很好的样板：

button, a.button, input.button
    display inline-block
    font-size 12px
    font-weight bold

    color white
    font-family sans-serif
    text-decoration none
    background #24B345
    cursor pointer // also linkless (i.e. js) anchors/buttons should have that

    // important to equalize input/button vs. anchor:
    box-sizing content-box
    border 4px solid green
    padding 8px 10px
    margin 5px 4px 10px 0

    // some of this is default, 
    // but since input often gets styled elsewhere...
    vertical-align middle // a bit subject to taste 
    min-height 0 

    &:hover, &:focus // slight hover effect, resp. keyboard use (:focus)
         background: #44D365

Live on Codefork

Answer 2

填充对按钮和锚点的应用方式不同。我不知道这是事实，但我的猜测是一个按钮保留了更多的空间，它看起来更像是一个链接被呈现为文本的按钮。

你可以试试这个：

a {
   padding-top:5px !important;
   padding-bottom:5px !important;
   padding-left:0px !important;
   padding-right:0px !important;
}

大小不一样，但非常接近。

Answer 3

好吧，我总是在按钮类中添加 line-height 属性，如下所示：

/* HTML */
<a href="" class="button"> Go somewhere </a>

<button class="button"> Click here </button>

<input type="submit" class="button" value="Submit">

/* CSS */
.button {
    box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
    line-height: inherit;   // this property does magic
   // rest of the styling
}

这对我总是有用..?

HTML锚点和输入按钮具有相同的CSS样式，但尺寸不同

3 个答案: