如何减少链接的高度并保持文本高度对齐？答案

【问题标题】：How to reduce the heigh of a link and keep the text height aligned?如何减少链接的高度并保持文本高度对齐？
【发布时间】：2021-11-06 18:18:50
【问题描述】：

我正在做一个像这样的简单菜单

<div className="main-menu">
        <ul>
          <li className="main-menu__app-menu"><a href="#">link 1</a></li>
          <li className="main-menu__app-menu"><a href="#">link 2</a></li>
          <li className="main-menu__app-menu"><a href="#">link 3</a></li>
          <li className="main-menu__user-menu"><a href="#">link 4</a></li>
          <li className="main-menu__user-menu"><a href="#">link 5</a></li>
        </ul>
      </div>

使用这个 css

.main-menu {
    border-bottom: 1px solid #000000;

    & > ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;

        & > li {
            display: inline;
            border: 1px solid #FF0000;
            height: 50px;

            & > a {
                display: block;

                text-align: center;
                padding: 1.4rem 1.6rem;
                color: #000000;
                text-decoration: none;

                &:hover {
                    color: #808080;
                }
            }


        }
    }

    &__app-menu {
        float:left;
    }

    &__user-menu {
        float:right;
        border: 1px solid #000000;
        border-radius: 1.5rem;
        margin: 0 .1rem;
    }
}

两个 __user-menu 链接有一个边框，但如果我降低它的高度，链接会保持固定，并且不会显示在按钮的中间。

我应该在哪里设置高度以始终使标签高度居中？

【问题讨论】：

标签： html css sass

【解决方案1】：

您已将填充设置为 padding: 1.4rem 1.6rem;，这会在顶部和底部添加 1.4rem，因此如果您尝试降低高度，它不会被填充占用。

用这个替换它： padding: 0 1.4rem 0rem 1.4rem;

这可确保您仅在元素的左侧和右侧具有 1.4rem 填充。

还要确保您在 CSS 代码顶部插入了 * {box-sizing: border-box;} 。 :)

【讨论】：

可爱，有效。谢谢你。我也添加了盒子尺寸。