Html 两个按钮垂直错位，如何正确对齐？

我有两个按钮，一个是A元素，另一个是按钮元素。它们都有相同的类（

class=“button-button--icon”

）。当我在它们两个上应用相同的CSS时，使用这些类，按钮的显示方式不同

这两个元素之间的区别在于A元素是其包含的LIs的直接子元素，但BUTTON元素被包装在一个包含在LI中的表单中

A按钮的垂直位置高于按钮的垂直位置

我尝试过的这些东西并没有解决我的问题：

• 将所有字体大小硬编码为16px
• 分别对包含的LIs和As应用边距或填充（这只会使我的整个UL向下移动）
• 将相等的垂直边距应用于A和按钮
• 将A也包装在表单中（没有效果，因为我在表单上没有样式）

• 显示：阻止！重要的

• 垂直对齐：基线

• 删除框大小调整声明

有没有人知道如何将A元素向下移动，使其顶部与按钮顶部位于同一行

我已经准备了一个代码笔，其中包含一个简化版本的代码，可以显示出哪里出了问题。为了防止代码笔丢失，我在这个问题的底部也列出了完全相同的代码。

HTML：

<!-- Real world: this UL is normally in a table cell, not a DIV -->
<div class="example">
    <ul>
        <li>
            <a class="button button--icon" href="#">
                <img class="icon" src="http://placehold.it/120x120">
            </a>
        </li>

        <li>
            <form>
                <button class="button button--icon">
                    <img class="icon" src="http://placehold.it/120x120">
                </button>
            </form>
        </li>

        <li>
            <form>
                <button class="button button--icon">
                    <img class="icon" src="http://placehold.it/120x120">
                </button>
            </form>
        </li>
    </ul>
</div>

---

如果设置这些，则它们将对齐。列表项是内联块项，所以需要设置“垂直对齐顶部”，否则它们将与基线对齐。我将表单设置为没有填充，以显示框完全对齐

.example {
    form {
        padding: 0; /* you original also have padding top and bottom on form */
    }
    li {
        display: inline-block; /* this you already have */
        vertical-align: top;
    }
}

---

设置垂直对齐时，我总是发现使用

display:table

：

---

添加

垂直对齐：顶部

列出项目

s。由于它们（

.example li

）是显示

内联块

，您需要将其设置为垂直对齐，因此将其设置为顶部，您在其他项目上看到的额外间距是它所在表单元素的填充！我知道这是一件小而愚蠢的事情。将垂直填充声明仅移动到

ul

，并添加了

li{vertical align:top；}

。工作起来很有魅力。谢谢：）将在几分钟内接受。

.example {
    form {
        padding: 0; /* you original also have padding top and bottom on form */
    }
    li {
        display: inline-block; /* this you already have */
        vertical-align: top;
    }
}

ul {
    list-style-type: none;
    display: table;
}
li {
    display: table-cell;
    vertical-align: middle;
}