如何降低 link 的高度并保持文本高度对齐？

Question

我正在制作这样一个简单的菜单

<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 link 有边框，但如果我降低它的高度，link 保持固定，不会显示在按钮中间。

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

Answer 1

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

将其替换为： padding: 0 1.4rem 0rem 1.4rem;

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

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

如何降低 link 的高度并保持文本高度对齐？

How to reduce the heigh of a link and keep the text height aligned?

html

css

sass