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

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

一个简单的解决方案是使用 margins（请注意，如果 wrapping 更改，nth-child 解决方案 将不起作用）：

1. 将margin: 5px 添加到box 以替换10px 的右边距和下边距。

2. 现在对于容器boxes-container，您可以否定 margin: -5px 将boxes 拉到边缘。

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

Answer 2

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

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

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

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

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

Answer 3

我已将倒数第二个孩子的margin-bottom 设置为0px，并将vertical-align: middle 设置为.label，行高等于.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 4

请试试这个。我添加了css，即

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