时间戳

首页 > 解决方案 > 为什么h1和按钮没有对齐

html - 为什么h1和按钮没有对齐

问题描述

我注意到一些很奇怪的事情，我似乎无法对齐 h1 和按钮 html 元素。我已经删除了边框和填充，但似乎仍然存在一致的错位。我不确定发生了什么，有人可以解释为什么会发生这种行为吗？我附上了最终结果的图片：

在此处输入图像描述

<head>
    <style>
        button {
            margin:0px;
            padding:0px;
            display:inline-block;
            height:30px;
            width:100px;
            background:lightblue;
            vertical-align: text-top;
            font-family: Arial;
            font-size:20px;
            font-style: normal;
            font-weight: normal;
        }

        h1 {
            margin:0px;
            padding:0px;
            display:inline-block;
            height:30px;
            width:100px;
            background:lightblue;
            font-family: Arial;
            font-size:20px;
            font-style: normal;
            font-weight: normal;
        }

        div {
            background:red;
        }
    </style>
</head>

<body>
    <div>
        <h1>Head</h1>
        <button>Head</button>
    </div>
</body>

标签： htmlcss

解决方案

使用verticle-align: top;而不是verticle-align: text-top;因为verticle-align: text-top;只影响文本。并且有一个默认border-width: 2px;按钮，因此如果您不需要，请删除。

button {
            margin:0px;
            padding:0px;
            display:inline-block;
            height:30px;
            width:100px;
            background:lightblue;
            vertical-align: top;
            font-family: Arial;
            font-size:20px;
            font-style: normal;
            font-weight: normal;
        }

        h1 {
            margin:0px;
            padding:0px;
            display:inline-block;
            height:30px;
            width:100px;
            background:lightblue;
            font-family: Arial;
            font-size:20px;
            font-style: normal;
            font-weight: normal;
        }

        div {
            background:red;
        }
<div>
        <h1>Head</h1>
        <button>Head</button>
    </div>

推荐阅读