Question

我正在创建按钮样式。

目前，它们看起来像这样：

html {
    color: #555;
    background: #fefefe;
    font-size: 1em;
    line-height: 1.5;
}

.btn {
    display: inline-block;
    text-decoration: none;
    padding: 5px 10px;
    background: #ccc;
    border: 1px solid #cdcdcd;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet"/>

<a href="#" class="btn">Test</a>
<input type="button" value="Test" class="btn">
<input type="submit" value="Test" class="btn">
<input type="reset" value="Test" class="btn">
<button type="button" class="btn">Test</button>
<button type="submit" class="btn">Test</button>
<button type="reset" class="btn">Test</button>

如您所见，使用input创建的三个按钮看起来与其他按钮不同。

经过一些调试后，我发现line-height元素上的html声明对此负责。

如果设置line-height，我的按钮看起来怎么样？

请注意，我已经在使用normalize.css。

Answer 1

正如其他人所指出的那样，您应该为line-height课程设置.btn，但是，我相信您确实需要line-height: inherit;专门为您实际<em>继承行高。

Answer 2

将相同的line-height属性设置为您需要的元素

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
    line-height: 24px;
}

Answer 3

只需将line-height设置为normal或任何其他值，即可为您希望看起来相同的元素类设置：

.btn {
    display: inline-block;
    text-decoration: none;
    padding: 5px 10px;
    background: #ccc;
    border: 1px solid #cdcdcd;
    line-height: normal; /* set a line-height for your elements */
}

html {
    color: #555;
    background: #fefefe;
    font-size: 1em;
    line-height: 1.5;
}

.btn {
    display: inline-block;
    text-decoration: none;
    padding: 5px 10px;
    background: #ccc;
    border: 1px solid #cdcdcd;
    line-height: normal; /* set a line-height for your elements */
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet"/>

<a href="#" class="btn">Test</a>
<input type="button" value="Test" class="btn">
<input type="submit" value="Test" class="btn">
<input type="reset" value="Test" class="btn">
<button type="button" class="btn">Test</button>
<button type="submit" class="btn">Test</button>
<button type="reset" class="btn">Test</button>

线高＆amp;输入按钮高度

3 个答案: