html - 在带有底部边框的 "row"顶部创建元素的底部边框

Question

我有不同数量的元素，它们可能适合也可能不适合容器内的单个“行”。如果它们不适合，则应创建另一个“行”。

所有元素都将包含一个单词(或最多 2 个)，因此数据不超过 1 行。每个元素应该有一个 1px 的底边框，每行也应该有一个 1px 的底边框，所以结果看起来像这样:

|-----------------------------------
|                                  |
|  Foo bar    Foo bar      Foo bar |
|--=======-------------------------|
|                                  |
|                                  |
|  Foo bar    Foo bar      Foo bar |
|----------------------------------|

(鼠标悬停在第一项上)。

元素的底部边框应出现在行底部的行的顶部(隐藏与元素宽度一样多的行边框)。

我有this codepen , 但是

• 我不知道如何设置每个“行”的底部边框的样式
• 每次我将鼠标放在其中一个元素上时，这些元素都会移动。

我应该用什么来实现我想要的？

注意:我可以使用 CSS3，如果那样会更容易的话。

.container {
  border: 1px solid grey;
  width: 300px;
}

.item {
  float: left;
  /*border: 1px solid green;*/
  border: 1px solid transparent;
  padding: 2px 7px 2px 7px;
}

.item:hover {
  border-bottom: 1px solid red;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
</div>

Answer 1

由于内容总是最多一行，您可以将每个元素的 height 设置为固定高度(比如 height: 2em)，然后使用linear-gradient 父容器相同高度的背景，产生类似行线的效果。正如您在代码段的第二个 block 中看到的那样，这些行是父级的 background 并且即使没有内容也会生成它们。这给人一种个别元素具有全宽底部边框的错觉。

这不需要对您的标记进行任何更改，但请注意，只有当元素的内容适合一行时，这种方法才能正常工作。

.container {
  width: 300px;
  font-size: 14px;
  /* following code produces the blue lines */
  background: linear-gradient(to bottom, transparent 1.95em, blue 1.95em);
  background-size: 100% 2em;
  background-origin: border-box;
  background-position: 0px 0px; /* y position is dependant on border-top-width */
}
.item {
  box-sizing: border-box; /* to make padding part of element's height & width */
  float: left;
  height: 2em; /* a fixed height */
  padding: 2px 7px 2px 7px;
  border-bottom: 1px solid transparent; /* needed to avoid jumping */
}
.item:hover {
  border-bottom: 1px solid red; /* red line that is shown on hover */
}

/* just for demo */

.demo{
  margin-top: 10px;
  border: 1px solid grey;
  background-position: 0px 1px;
  height: 8em;
}
.container:hover{
  font-size: 16px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="item">Foo bar long</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
  <div class="item">Foo bar</div>
</div>

<div class="container demo">

</div>

输出截图: