html - 为什么如果'display' 未声明为 'inline-block' ，则不要调整大小以包裹填充

Question

标签： htmlcss

Answer 1

您没有指定 main 的高度，这就是它没有menu-item正确显示的原因。

默认情况下，链接使用display: inline，它不会自动增长。

尝试将：添加display:flex;到您的菜单类（添加时，您menu将需要正确height显示menu-items）：https ://codepen.io/Aypro18/pen/PoPGwoq

.menu {
    background-color: lightsalmon;
  display:flex;
}

/* menu item */
.menu .menu-item {
    /* sizing */
    padding: 16px;
    min-width: 64px;

    /* text decorating */
    text-align: center;
    text-decoration: none;
    color: white;
    font-size: 16px;
}

.menu .menu-item:hover {
    background-color: salmon;
}

<div class="menu">
  <a class="menu-item" href="#">Menu 1</a>
  <a class="menu-item" href="#">Menu 2</a>
  <a class="menu-item" href="#">Menu 3</a>
</div>