根据最下面的内容制作底部边框

Question

我正在使用 HTML、CSS、JSP 和 JavaScript 开发我的主页，关于乐器销售和人们的交流。

目前，我正在使用 div、ul、li 和 h 标签为我站点的菜单配置图表实施站点地图。我想在最下面的子菜单项（最后 li 标签）下创建底部边框，如下图所示（见蓝色指示）。它们应该有底部边框，并调整到最低（最后）li 标签。

我怎样才能实现我的目标？这是我目前所拥有的：

#sitemap_menu_container {
  width: 980px;
  height: 200px;
  border: 1px solid violet;
}


.sitemap_menu {
  width: 150px;
  height: 180px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu_header1 {
  font-size: 15pt;
  font-family: Arial;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu_header2 {
  font-size: 15pt;
  font-family: Arial;
  color: red;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu ul li {
  list-style: none;
  font-size: 11pt;
  font-family: Arial;
  background: url(../images/bullet1.png)no-repeat 0px 50%;
  padding-left: 10px;
  margin-left: 10px;
  cursor: pointer;
}

<div id="sitemap_menu_container">
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">About</h2>
    <ul>
      <li>P&G introduce</li>
      <li>P&G history</li>
      <li>location</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Piano goods</h2>
    <ul>
      <li>All kind of piano</li>
      <li>Upright</li>
      <li>Grand</li>
      <li>Electronics</li>
      <li>Synthesizer</li>
      <li>Management Tools</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">Guitar goods</h2>
    <ul>
      <li>Acoustic</li>
      <li>Classic</li>
      <li>Electrics</li>
      <li>Ukulele</li>
      <li>Management Tools</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Community</h2>
    <ul>
      <li>Free Board</li>
      <li>Reviews</li>
      <li>Gallery Board</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">Event</h2>
    <ul>
      <li>Ongoing Event</li>
      <li>Announcement</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Help you</h2>
    <ul>
      <li>Guide</li>
      <li>Notice</li>
      <li>FAQ</li>
      <li>Q&A</li>
      <li>Sitemap</li>
    </ul>
  </div>
</div>

Answer 1

只需添加以下 css 即可为子菜单的最后一个 <li> 添加边框

.sitemap_menu ul li:last-child{border-bottom:1px solid #000;}

Answer 2

您可以改用<hr>，只需调整列的高度

#sitemap_menu_container {
  width: 980px;
  height: 200px;
  border: 1px solid violet;
}

.sitemap_menu {
  width: 150px;
  height: 180px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.sitemap_menu_header1 {
  font-size: 15pt;
  font-family: Arial;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu_header2 {
  font-size: 15pt;
  font-family: Arial;
  color: red;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu ul li {
  list-style: none;
  font-size: 11pt;
  font-family: Arial;
  background: url(../images/bullet1.png)no-repeat 0px 50%;
  padding-left: 10px;
  margin-left: 10px;
  cursor: pointer;
}

<div id="sitemap_menu_container">
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">About</h2>
    <ul>
      <li>P&G introduce</li>
      <li>P&G history</li>
      <li>location</li>
    </ul>
    <hr>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Piano goods</h2>
    <ul>
      <li>All kind of piano</li>
      <li>Upright</li>
      <li>Grand</li>
      <li>Electronics</li>
      <li>Synthesizer</li>
      <li>Management Tools</li>
    </ul>
    <hr>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">Guitar goods</h2>
    <ul>
      <li>Acoustic</li>
      <li>Classic</li>
      <li>Electrics</li>
      <li>Ukulele</li>
      <li>Management Tools</li>
    </ul>
    <hr>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Community</h2>
    <ul>
      <li>Free Board</li>
      <li>Reviews</li>
      <li>Gallery Board</li>
    </ul>
    <hr>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">Event</h2>
    <ul>
      <li>Ongoing Event</li>
      <li>Announcement</li>
    </ul>
    <hr>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Help you</h2>
    <ul>
      <li>Guide</li>
      <li>Notice</li>
      <li>FAQ</li>
      <li>Q&A</li>
      <li>Sitemap</li>
    </ul>
    <hr>
  </div>
</div>

Answer 3

为此，您可以使用 flexbox 来更加灵活。实际上，删除 #sitemap_menu_container 和 .sitemap-menu 中的高度限制并将 display: flex 添加到 #sitemap_menu_container。这是片段：

#sitemap_menu_container {
  width: 980px;
  border: 1px solid violet;
  display: flex;
}


.sitemap_menu {
  width: 150px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu_header1 {
  font-size: 15pt;
  font-family: Arial;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu_header2 {
  font-size: 15pt;
  font-family: Arial;
  color: red;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu ul li {
  list-style: none;
  font-size: 11pt;
  font-family: Arial;
  background: url(../images/bullet1.png)no-repeat 0px 50%;
  padding-left: 10px;
  margin-left: 10px;
  cursor: pointer;
}

<div id="sitemap_menu_container">
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">About</h2>
    <ul>
      <li>P&G introduce</li>
      <li>P&G history</li>
      <li>location</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Piano goods</h2>
    <ul>
      <li>All kind of piano</li>
      <li>Upright</li>
      <li>Grand</li>
      <li>Electronics</li>
      <li>Synthesizer</li>
      <li>Management Tools</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">Guitar goods</h2>
    <ul>
      <li>Acoustic</li>
      <li>Classic</li>
      <li>Electrics</li>
      <li>Ukulele</li>
      <li>Management Tools</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Community</h2>
    <ul>
      <li>Free Board</li>
      <li>Reviews</li>
      <li>Gallery Board</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">Event</h2>
    <ul>
      <li>Ongoing Event</li>
      <li>Announcement</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Help you</h2>
    <ul>
      <li>Guide</li>
      <li>Notice</li>
      <li>FAQ</li>
      <li>Q&A</li>
      <li>Sitemap</li>
    </ul>
  </div>
</div>

请记住，它只适用于现代浏览器：https://caniuse.com/#search=flexbox。如果您的目标是较旧的浏览器，我认为您需要使用 table.

希望对您有所帮助

根据最下面的内容制作底部边框

Make bottom borders in line according to the lowest content

html

css

border