html - 所有列表项（连接）的边框底部，它将如何工作？

Question

我用列表项创建了一个未排序的列表。它看起来像这样：

<ul id="mylist">
 <li>
  <input type="checkbox" id="[[Array]]" />
  <label for="[[Array]]"><img src="images/[[ArrayImage]]"/></label>
  <div class="subtitle">[[Name]]</div>
 </li>
</ul>

所以它看起来像我添加的一张图片。图片名称在图片的底部，但如果我在 CSS 中输入“border-bottom”，它只会在图片上显示一个边框。有没有办法显示连接在一起的边框（如图所示）？我希望任何人都可以帮助我。谢谢

标签： htmlcss

Answer 1

默认情况下，DIV 的显示设置为阻塞，这意味着您占用了父元素的宽度。因为 li 没有固定宽度，所以 div 占据了它可用的全部宽度。如果您将其样式设置为边框底部，它会将其应用于相同的全宽，这意味着您将获得一条完整的线。

对此有两种可能的解决方案，我提供了一个工作示例（您可以单击下面的运行代码片段以查看运行中的代码）。

<ul id="mylist">
  <li>
    <input type="checkbox" id="[[Array]]" />
    <label for="[[Array]]"><img src="images/[[ArrayImage]]"/></label><br>
    <span style="border-bottom: 2px solid grey;" class="subtitle">[[Name]]</span>
  </li>
</ul>

<ul id="mylist2">
  <li>
    <div>
      <input type="checkbox" id="[[Array]]" />
      <label for="[[Array]]"><img src="images/[[ArrayImage]]"/></label>
    </div>
    <span style="border-bottom: 2px solid grey;" class="subtitle">[[Name]]</span>
  </li>
</ul>

一方面，我们只是将字幕 div 更改为一个 span，默认情况下具有 inline-block 显示，然后我们添加一个额外的 <br> 标签来拆分它。

在第二个中，我们只是将除了字幕之外的所有内容都包含在一个额外的 div 中。这将达到相同的效果。