Question

如果您将<p>放在<section>元素内并提供<p>填充，则<section>元素将展开以保存整个段落元素及其填充。奇妙。

如果您对<li>所包含的<ul>添加了填充，则<ul>元素不会展开以适合<li>有填充的。相反，它允许填充延伸超过＆＃34;框＆＃34;。到底是怎么回事？

请尝试以下页面查看我的意思。 <li>的填充以30px夸大，以清楚地作为示例。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果您希望父元素的尺寸符合填充，请将子display元素的li从inline更改为inline-block。

Example Here

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

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

1 个答案: