HTML锚点和输入按钮具有相同的CSS样式，但尺寸不同 [英] HTML anchor and input buttons with same CSS style, but different dimensions

问题描述

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

我不得不结束一个表单输入，锚标签彼此相邻，并且它们的高度和宽度不同。我已经使每个内部按钮文本相同只是为了显示差异喜欢（显然，我不需要2个'添加'按钮旁边：P）

我不想指定宽度，或CSS中的高度，因为内容将改变。即使字体看起来略有不同的大小，从框模型看起来像填充是好的。

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

标记

 < form id =method =POSTaction => 
< input class =buttontype =submitname =submitvalue =Add> 
< / form> 
 
< a class =buttonhref => Add< / a> 
  

CSS

  .button {
 font-family：Arial; 
 background：linear-gradient（到底部，＃FCB97E 0％，＃F07605 100％）重复滚动0 0透明; 
 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！重要; 
 text-align：center; 
 text-decoration：none; 
 text-shadow：0 1px 1px rgba（0，0，0，0.3）; 
 vertical-align：baseline; 
} 
  

编辑：下面它不是填充，因为箱子模型在firebug显示填充是一样的每一个，所以它的东西todo与实际元素本身

如何

解决方案

填充符合不同的按钮和锚。我不知道这是事实，但我的猜想是一个按钮保留一个更多的空间，它的价值看起来更像一个按钮，其中链接呈现为文本。

您可以尝试这样：

  a {
 padding-top：5px！important; 
 padding-bottom：5px！important; 
 padding-left：0px！important; 
 padding-right：0px！important; 
} 
  

这不会是完全相同的大小， p>

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

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)

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/

Markup

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

EDIT: 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

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.

You might try this:

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

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

这篇关于HTML锚点和输入按钮具有相同的CSS样式，但尺寸不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！