在具有底部边框的“行”顶部创建元素的底部边框

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背景用于相同高度的父容器产生类似行线的效果。正如您在 sn-p 的第二个块中看到的那样，这些行是父级的 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>

输出截图：

Answer 2

如果您将 html 更改为 agrouped 元素：

<div class="container clearfix">
   <div class="row">
       <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="row">
       <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="row">
       <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>

你可以造型：

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

看看这个小提琴：

https://jsfiddle.net/1LLzr8q7/

Answer 3

用这个更新你的CSS。

.item {
  float: left;
  border-bottom: 1px solid grey;
  padding: 2px 7px 2px 7px;
}