Question

我正在重新创建Kotaku website，但是在页脚中创建列表时遇到了麻烦。下图描述了我的意思。

“热门标签”部分的创建是在列表项内使用<ul> <li>，其中有<a>。这个<li>的边界为1px，以创建分隔线，但是在最后一项（红色圆圈）上没有该分隔线，但据我有限的理解应该是。发生这种情况的原因是，该行上的任何最后一项在被移到另一行之前都是如此，因此，调整窗口的大小将使最终项永远没有边框。我无法重新创建它。

我不确定如何显示与此相关的代码，因为在Devtools中仅<a>标记中显示的CSS长103行，因此我不确定会用到什么。我能说的是从列表项中的<a>标记中删除'display：inline-block'会使边框返回，我不知道为什么会这样。

任何人都可以看看Kotaku页面并向我解释如何完成吗？非常感谢，我提出了很多要求，但是我无法找到其他方法来正确地解释它，因为我什至找不到在线解释此行为的资源，这是我最后一次尝试之前的最后一次尝试。

谢谢。

Kotaku website footer, red circle highlights missing border

此问题已被重写以使其更清晰

Answer 1

因此，我对此做了一个孤立的示例，并设法获得了预期的结果。我一辈子都无法理解它为什么起作用，并且在网上也没有得到很多有用的帮助，我将把它归咎于我的拙劣描述。

我已经做过一些测试，结果表明问题出在html中。所以我最初是这样写我的代码的：

<li><a href="#">Item</a></li>

这导致一行上的最后一个项目上应用了边框，这对我来说是完全有意义的，这也是我期望其工作的方式。但这不是Kotaku网站上的内容，我没有使用任何与它们不同的样式。

原来，我应该这样写我的代码：

<li>
 <a href="#">Item</a>
</li>

此刻我并没有真正获得空格，但正是空格使我心痛。现在排序。

这是对我有用的代码。

#container {
  max-width: 970px;
  min-width: 200px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  background-color: grey;
}

#ul {
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}

.list-item {
  display: inline;
  padding-right: 20px;
  padding-left: 20px;
  border-width: 0px 1px 0px 0px;
  border-color: white;
  border-style: solid;
  position: relative;
  margin-top: 20px;
}

.list-item:last-child {
  display: inline;
  padding-right: 20px;
  padding-left: 20px;
  border-width: 0px 0px 0px 0px;
  border-color: white;
  border-style: solid;
  position: relative;
  margin-top: 20px;
}

.link {
  display: inline-block;
  margin-top: 20px;
  padding-bottom: 20px;
}

<div id="container">
  <ul id="ul">
    <li class="list-item">
      <a href="#" class="link">Item 1</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 2</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 3</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 4</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 5</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 6</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 7</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 8</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 9</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 10</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 11</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 12</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 13</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 14</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 15</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 16</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 17</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 18</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 19</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 20</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 21</a>
    </li>
    <li class="list-item">
      <a href="#" class="link">Item 22</a>
    </li>


  </ul>


</div>

为什么此<li>标签上的边框消失了？

1 个答案: