html - 样式输入和跨度作为按钮类，略有不同

Question

我想让我网站上的所有按钮都遵循一个平面按钮类，输入按钮或跨度按钮应该完全相同。

我应用了相同的类，删除了边框，添加了填充等。但是，使用该元素的按钮看起来比使用表单按钮的按钮稍大。

这是为什么呢？我还可以编辑哪些其他 css 属性以使它们看起来相同(除了为所有这些设置预设高度之外？)

这是我的按钮类:

.button{
    padding: 10px;
    display: inline;
    border-radius: 2px;
    font-family: "Arial";
    border: 0;
    margin: 0 10px;
    background: red;
    font-size: 15px;    
    line-height: 15px;
    color: white;
    width: auto;
    height: auto;
    box-sizing: content-box;
}

这是 fiddle :http://jsfiddle.net/raphadko/f3293yeL/

Answer 1

最佳解决方案是将按钮包裹在 span 内。这样，您就可以完全控制按钮的位置。不要将它们用作表单内的按钮!

span > .button {
    padding: 10px;
    display: inline;
    border-radius: 2px;
    font-family: "Arial";
    border: 0;
    margin: 0 10px;
    background: red;
    font-size: 15px;
    line-height: 15px;
    color: white;
    width: auto;
    height: auto;
    box-sizing: content-box;
}

<form>
   <span>
       <input type="submit" class="button" value="Button1" />
        </span>
  
  <span>
       <input type="submit" class="button" value="Button2" />
        </span>
  
  <span>
       <input type="submit" class="button" value="Button3" />
        </span>
    
</form>

注意: span 可以帮助您轻松定位元素，但不建议在涉及表单时将其用作按钮。