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

Question

如果将 <p> 放在 <section> 元素内并提供 <p> 填充，则 <section> 元素会扩展以容纳整个段落元素及其填充。太棒了。

如果在 <ul> 包含的 <li> 上放置填充，<ul> 元素 不会展开 以适应<li> 的填充。相反，它允许填充超过 "box"。这到底是怎么回事？

请尝试下面的页面以了解我的意思。 <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;
}

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

Padding on List Items Extends Past List

html

css