12

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

我最终不得不将一个表单输入和一个锚标记放在一起，它们的高度和宽度是不同的。我在每个按钮上都设置了相同的内部按钮文本，只是为了显示类似的差异（显然我不需要两个相邻的“添加”按钮：P）

我不想在 CSS 中指定宽度或高度，因为内容会改变。甚至字体看起来大小也略有不同，从盒子模型来看，填充看起来还不错。

http://jsfiddle.net/aeD4Z/2/

标记

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

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

输入和锚点的盒子模型

如何从上面的 js fiddle 中的单个 CSS 类中获得相同的尺寸？

4

3 回答 3

3

为了完全均衡“button-ish”<a>锚点，input最近button，同步它们的 box-sizing 是个好主意：

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（以手写笔表示）是一个很好的样板：

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

生活在 Codefork 上

于 2017-02-21T17:59:21.780 回答
0

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

你可以试试这个：

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

这不会是完全相同的大小，但非常接近。

于 2013-02-27T13:04:21.830 回答
0

好吧，我总是在按钮类中添加 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
}

这总是对我有用..

于 2021-06-26T09:43:51.657 回答