为何<aside>元素仅为首个<li>添加边框？技术求助

问题描述 #

用<aside>包裹所有<li>列表项，通过CSS给<aside>添加上下边框，但页面中只有第一个<li>能呈现aside的边框效果。尝试给每个<li>单独嵌套<aside>无效，Chrome DevTools排查也没定位到原因。

错误代码 #

HTML

<aside>
      <h5><strong>Related posts</strong></h5>
      <ul>
        
        <li class="related-post">
          <img
            src="img/mantyping.jpg"
            alt="mantyping"
            width="100"
            height="70"
          />
          <div>
          <a href="Howtolearnwebdevelopment.html" class="related-link"
            >How to learn web development</a
          >
          <p class="related-author"><strong>By Jonas Schmed</strong></p>
        </li>
        </div>

        <li class="related-post">
          <img
            src="img/csspower.jpg"
            alt="lightning"
            width="100"
            height="70"
          />
          <div>
          <a href="Unknownpowersofcss.html" class="related-link"
            >The unknown powers of css</a
          >
          <p class="related-author"><strong>By Jim Dillon</strong></p>
        </li>
        </div>

        <li class="related-post">
          <img
            src="img/javascriptcode.png"
            alt="javascript code"
            width="100"
            height="70"
          />
          <div>
          <a href="javascriptisawesome.html" class="related-link"
            >Why Javascript is awesome</a
          >
          <p class="related-author"><strong>By Matilda</strong></p>
        </li>
      </div>

      </ul>
    </aside>

CSS

aside {
background-color: #f7f7f7;
border-top: 5px solid #1098ad;
border-bottom: 5px solid #1098ad;
padding: 50px;
width: 500px;
}

问题根源 #

HTML标签嵌套错误：每个<li>内部的<div>闭合标签</div>都写在了</li>之后，违反了HTML的嵌套规则。浏览器会自动修正错误结构，导致后面的<li>被排除在<ul>和<aside>的正常布局流之外，因此只有第一个<li>处于aside的样式覆盖范围内。

修复方案 #

调整<div>的闭合位置，将</div>移到对应的</li>之前，保证标签正确嵌套：

修正后的HTML

<aside>
  <h5><strong>Related posts</strong></h5>
  <ul>
    <li class="related-post">
      <img
        src="img/mantyping.jpg"
        alt="mantyping"
        width="100"
        height="70"
      />
      <div>
        <a href="Howtolearnwebdevelopment.html" class="related-link"
          >How to learn web development</a
        >
        <p class="related-author"><strong>By Jonas Schmed</strong></p>
      </div>
    </li>

    <li class="related-post">
      <img
        src="img/csspower.jpg"
        alt="lightning"
        width="100"
        height="70"
      />
      <div>
        <a href="Unknownpowersofcss.html" class="related-link"
          >The unknown powers of css</a
        >
        <p class="related-author"><strong>By Jim Dillon</strong></p>
      </div>
    </li>

    <li class="related-post">
      <img
        src="img/javascriptcode.png"
        alt="javascript code"
        width="100"
        height="70"
      />
      <div>
        <a href="javascriptisawesome.html" class="related-link"
          >Why Javascript is awesome</a
        >
        <p class="related-author"><strong>By Matilda</strong></p>
      </div>
    </li>
  </ul>
</aside>

CSS无需修改。

修正后，所有<li>都会正常包含在<ul>和<aside>内部，aside的边框、背景等样式会正确覆盖整个列表区域，所有列表项都能显示在aside的样式范围内。

内容的提问来源于stack exchange，提问作者Katie