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背景相同高度的父容器产生类似行的效果。正如您在代码段的第二个块中所看到的那样，这些行是父background，即使没有内容也会生成它们。这给出了具有全宽底边的单个物品的错觉。

这并不需要对您的标记进行任何更改，但请注意，只要项目的内容适合单行，此方法就可以正常工作。

＆＃13;

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

＆＃13;

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

＆＃13;

输出屏幕截图：

Answer 2

用这个更新你的CSS。

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

Answer 3

如果您将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/

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

3 个答案: