如何将标签与包装标签对齐？

Question

我有一个标签和多个标签，它们可能会换行到多行：

 .container { background-color: #ddd; display: flex; width: 200px; margin-bottom: 50px; } .label { margin-right: 10px; } .boxes-container { display: flex; flex-wrap: wrap; } .box { display: inline-block; height: 40px; width: 60px; margin-bottom: 10px; margin-right: 10px; background-color: blue; }

 <div class="container"> <label class="label">Tags:</label> <span class="boxes-container"> <span class="box"></span> <span class="box"></span> </span> </div> <div class="container"> <label class="label">Tags:</label> <span class="boxes-container"> <span class="box"></span> <span class="box"></span> <span class="box"></span> <span class="box"></span> </span> </div>

它看起来像这样：

我想实现以下目标：

1. 标签和标签的第一行应该有相同的中线。
2. 去掉最后一行标签下方的多余空间，但保留第一行和第二行标签之间的空间。

这是期望的结果：

我怎么能做到这一点？

Answer 1

我已将 last 和 second last child 的margin-bottom为0px并将vertical-align: middle为.label ， line-height 等于.box的高度。

 .container { background-color: #ddd; display: flex; width: 200px; margin-bottom: 50px; } .label { margin-right: 10px; line-height:40px; vertical-align:middle; } .boxes-container { display: flex; flex-wrap: wrap; } .box { display: inline-block; height: 40px; width: 60px; margin-bottom: 10px; margin-right: 10px; background-color: blue; } .box:last-child,.box:nth-last-child(2) { margin-bottom: 0px; }

 <div class="container"> <label class="label">Tags:</label> <span class="boxes-container"> <span class="box"></span> <span class="box"></span> </span> </div> <div class="container"> <label class="label">Tags:</label> <span class="boxes-container"> <span class="box"></span> <span class="box"></span> <span class="box"></span> <span class="box"></span> </span> </div>

Answer 2

请试试这个。 我已经添加了 css ie

.boxes-container .box:nth-last-of-type(-n+2) {
   margin-bottom: 0;
}
.label {  
   margin-top: 8px;
}

 .container { background-color: #ddd; display: flex; width: 200px; margin-bottom: 50px; } .label { margin-right: 10px; margin-top: 8px; } .boxes-container { display: flex; flex-wrap: wrap; } .box { display: inline-block; height: 40px; width: 60px; margin-bottom: 10px; margin-right: 10px; background-color: blue; } .boxes-container .box:nth-last-of-type(-n+2) { margin-bottom: 0; }

 <div class="container"> <label class="label">Tags:</label> <span class="boxes-container"> <span class="box"></span> <span class="box"></span> </span> </div> <div class="container"> <label class="label">Tags:</label> <span class="boxes-container"> <span class="box"></span> <span class="box"></span> <span class="box"></span> <span class="box"></span> </span> </div>

Answer 3

正如其他人所指出的，有多种方法可以解决这个问题。 这是另一个使用flex对齐标签的方法：

.label {
  height: 40px;
  display: flex;
  align-items: center;
}

假设盒子的高度是固定的，我们可以将.label设置为相同的高度并使用 flex 将其内容居中。 一个同样有效的单行解决方案是指定line-height: 40px ，假设您的标签内容不会换行到多行。

在我的Codepen 演示中可以看到我删除每个.boxes-container的最后两个元素之后的空白空间的原始解决方案，但是ankita patel 的回答使用了一个相当优雅的表达式来覆盖最后一个和倒数第二个.box元素：

.box:nth-last-of-type(-n+2)

Answer 4

一个简单的解决方案是使用边距（请注意，如果包装发生变化，则nth-child 解决方案将不起作用）：

1. 向box添加margin: 5px以替换 10px 的右侧和底部边距。

2. 现在，对于容器boxes-container您可以设置负margin: -5px将box es 拉到边缘。

除了label的对齐方式之外，这会整理出所有内容。 在当前的标记中，没有通用的修复程序可以动态地适用于所有box大小和box-container宽度 - 因此您可以提供一些margin-top来对齐它。

请参阅下面的演示：

 .container { background-color: #ddd; display: flex; width: 200px; margin-bottom: 50px; } .label { margin-right: 10px; margin-top: 10px; /* adjust this*/ } .boxes-container { display: flex; flex-wrap: wrap; margin: -5px; /* NEW */ } .box { display: inline-block; height: 40px; width: 60px; /*margin-bottom: 10px; margin-right: 10px;*/ margin: 5px; /* NEW */ background-color: blue; }

 <div class="container"> <label class="label">Tags:</label> <span class="boxes-container"> <span class="box"></span> <span class="box"></span> </span> </div> <div class="container"> <label class="label">Tags:</label> <span class="boxes-container"> <span class="box"></span> <span class="box"></span> <span class="box"></span> <span class="box"></span> </span> </div>