HTML定位与相同的CSS样式输入按键，但不同的维度 [英] HTML anchor and input buttons with same CSS style, but different dimensions

问题描述

所以，我有整个网站应用相同的造型以及各种按钮一个基本的按钮类。

So I have a basic button class that applies the same styling to various buttons across a site.

我不得不最终把一种形式的输入，以及一个锚定标记彼此相邻，和它们的高度和宽度是不同的。我已经做了内部按钮上的文字一样在每个人只是为了显示像像（显然，我不需要2添加按钮旁边的对方：P）的差异

I have had to end up putting a form input, and an anchor tag next to each other, and their height and width is different. I have made the inner button text the same on each one just to show the differences like for like (obviously I dont need 2 'Add' buttons next to each other :P)

我不想要指定的宽度，或作为内容将改变CSS的高度。就连字体看起来略有不同大小，然后从箱子模型，它看起来像填充是好的。

I dont want to specify the width, or the height in the CSS as the contents will change. Even the font looks slightly different sized, and from the box model it looks like the padding is alright.

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

的 修改正如你可以看到下面是不填充，如萤火框模型显示填充是为每一个相同的，所以它的东西待办事项与实际元素本身的

As you can see below it is not the padding, as the box models in firebug show the padding is the same for each one, so its something todo with the actual element itself

我怎么都来自一个单一的CSS类相同的尺寸上面我的js小提琴？

How do I get both to be the same dimensions from a single CSS class in my js fiddle above?

推荐答案

的填充适用不同的按钮和锚。我不知道这是事实，但我的猜测是一个按钮预留一点空间更大围绕它的价值看起来更像里的某个链接呈现为文本的按钮。

The padding applies differently to the button and anchor. I don't know this as fact, but my guess is a button reserves a little more space around it's value to look more like a button where a link is rendered as text.

您可以试试这个：

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

该不会是完全一样的大小，但是pretty关闭。

Which won't be exactly the same size, but pretty close.

这篇关于HTML定位与相同的CSS样式输入按键，但不同的维度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！