html - 列表项上的填充扩展了过去的列表

Question

如果你输入 <p>在 <section> 里面元素并给出 <p>填充，<section>元素展开以容纳整个段落元素及其填充。太棒了。

如果你在 <li> 上填充包含在 <ul> 中, <ul>元素不会展开以适应 <li>与填充。相反，它允许填充延伸到“盒子”之外。这到底是怎么回事？

请尝试下面的页面以了解我的意思。 <li> 的填充被夸大了 30px 以清楚地做一个例子。

body {
  font-size: small;
  font-family: Verdana;
  background-color: #D9D9D9;
  margin: 0px;
}
header {
  background-color: #878CA1;
  margin: 10px;
}
nav {
  background-color: #878CA1;
  margin: 10px;
}
nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
nav ul li {
  padding: 30px;
  display: inline;
  background-color: #D9D9D9;
}
header h2#slogan {
  float: right;
}
section#main {
  background-color: black;
  margin: 10px;
  padding: 5px;
}
#main p {
  background-color: white;
  margin: 0px;
  padding: 30px;
}

<header>
  <img src="images/dummy-logo.png" alt="Vape Central Logo">
  <h2 id="slogan">Vapor Products and Accessories</h2>
</header>

<nav>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="tanks.html">Best Tanks</a>
    </li>
    <li><a href="batteries.html">Best Batteries</a>
    </li>
    <li><a href="about.html">About us</a>
    </li>
  </ul>
</nav>

<section id="main">
  <p>Test</p>
</section>

Answer 1

如果您想要父元素，请将子元素 li 的 display 从 inline 更改为 inline-block元素的尺寸以尊重填充。

Example Here

nav ul li {
    padding: 30px;
    display: inline-block;
    background-color: #D9D9D9;
}