Question

我创建了一个包含2个按钮和一个文本框的简单html文件。

我不明白的是，我的各种元素的高度对于所有元素都设置为20px，但它们似乎不是很好地对齐（垂直）。更令人沮丧的是，我期待我的+和 - 按钮在垂直轴和水平轴上都是中心对齐的。

你知道我错过了什么吗？

非常感谢您的帮助。

＆＃39; form.html＆＃39;的内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Form | 24ways.org</title>
<link rel=stylesheet href=style.css>
<script>
</script>
</head>

<body>
<input type="text" name="country" class="resizedTextbox" value="20" readonly>

<a href="#" class="myButton">+</a>
<a href="#" class="myButton">-</a>
</body>
</html>

＆style.css＆＃39;的内容：

.myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    box-shadow:inset 0px 1px 0px 0px #54a3f7;
    background-color:#3e12cc;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:1px solid #0815cc;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:18px;
    padding: 0 10px 10px 10px;
    text-decoration:none;
    text-shadow:0px 1px 0px #154682;
    width:20px;
    height:20px;
}
.myButton:hover {
    background-color:#0061a7;
}
.myButton:active {
    position:relative;
    top:1px;
}
.resizedTextbox {width: 50px; 
height: 20px;
padding: 0 10px 10px 10px;
border-color:#3e12cc;
text-shadow:0px 1px 1px #154682;
background-color:#f5effb;
}

Answer 1

如果您希望按钮（已使用display:inline-block;）进行垂直居中，则可以使用vertical-align。我一直用按钮和图标做这个。只需根据需要进行调整，即vertical-align:-1px。您可以为vertical-align使用正值和负值。您可能需要输入才能显示相同的内容。您也可以尝试在按钮顶部添加边距。如果这不起作用，请将按钮更改为display:block;，使用float:left;，然后添加margin-top。没有测试，但这就是我接近它的方式。

Answer 2

您没有考虑输入字段上的2px顶部和底部边框，将2px添加到按钮的高度。 https://jsfiddle.net/u8v3rgyt/4/

 .myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    box-shadow:inset 0px 1px 0px 0px #54a3f7;
    background-color:#3e12cc;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:1px solid #0815cc;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:18px;
    padding: 0 10px 10px 10px;
    text-decoration:none;
    text-shadow:0px 1px 0px #154682;
    width:20px;
    height:22px;
}

为什么我的按钮和文本框没有很好地对齐？

2 个答案: