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

这是小提琴：http://jsfiddle.net/raphadko/f3293yeL/

Answer 1

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

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>

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

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

1 个答案: