为什么我的锚填充超出父列表项？

Question

正如您从图像中看到的那样，

元素没有扩展并且忽略了元素的填充。

代码结构为

    <nav class="main-nav">
        <ul class="main-nav__items">
            <li class="main-nav__item">
                <a href="">Packages</a>
            </li>
            <li class="main-nav__item">
                <a href="">Customers</a>
            </li>
            <li class="main-nav__item main-nav__item--cta">
                <a href="">Start Hosting</a>
            </li>
        </ul>
    </nav>

CSS 是：

.main-nav {
  display: none;
}

.main-nav__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav__item {
  display: inline-block;
  margin: 0 1rem;
}

.main-nav__item a,
.mobile-nav__item a {
  text-decoration: none;
  color: #0e4f1f;
  font-weight: bold;
  padding: 0.2rem 0;
}

谁能解释一下为什么

没有调整（它没有固定高度所以应该调整）。

Answer 1

parent 不调整填充，因为元素是 INLINE 元素。所以 parent 忽略了它的填充。

简单修复： 将内联元素转换为 inline-block 元素：

.main-nav__item--cta a{
    display: inline-block
 }

之后 parent 将调整为 padding

为什么我的锚填充超出父列表项？

Why does my anchor padding go beyond the parent list item?

html

css

inline

padding