在具有底部边框的 "row" 顶部创建元素的底部边框

Question

我有不同数量的物品，它们可能适合也可能不适合放在一个容器内的单个 "row" 中。如果它们不适合，则应创建另一个 "row(s)"。

所有项目都将包含一个单词（或最多 2 个），因此数据不超过 1 行。每个项目的底边框应为 1px，每行的底边框也应为 1px，因此结果如下所示：

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

（鼠标悬停在第一项）。

项目的底部边框应出现在行底部的行的顶部（隐藏与项目宽度一样多的行边框）。

我有this codepen，但是

我不知道如何设置每个 "row"
每次我将鼠标放在其中一个项目上时，这些项目都会移动。

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

注：我可以用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

用这个更新你的css。

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

Answer 2

如果您将 html 更改为分组元素：

<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;
 }

看到这个 fiddle:

https://jsfiddle.net/1LLzr8q7/

Answer 3

由于内容总是最多一行，您可以将每个项目的 height 设置为固定高度（比如 height: 2em），然后使用 linear-gradient 背景对于相同高度的父容器产生类似行的效果。正如您在代码段的第二个块中看到的那样，这些行是父级的 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>

输出截图：

在具有底部边框的 "row" 顶部创建元素的底部边框

Creating a bottom border of element(s) on top of a "row" with bottom border

html

css

linear-gradients