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

Question

我有一个标签和多个标签可以换行到多行：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

看起来像这样：

我想要实现以下目标：

1. 标签和标签的第一行应该具有相同的中间线。
2. 摆脱最后一行标签下方的额外空间，但保留第一行和第二行标签之间的空格。

这是期望的结果：



我怎么能实现这个目标？

Answer 1

我已将最后一个和最后一个孩子的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 2

请试试这个。我添加了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>

Answer 3

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

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

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

我可以在我的Codepen demo中看到我在ankita patel's answer的每个.boxes-container的最后两个元素之后删除空格的原始解决方案，但是Is the use of Java's default package a bad practice?使用了一个相当优雅的表达式来覆盖最后一个倒数第二个.box元素：

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

Answer 4

一个简单的解决方案是使用边距（请注意，如果包装更改， nth-child解决方案将无效）：

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

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

除了label的对齐之外，它排除了所有内容。在当前标记中，没有针对所有box尺寸和box-container宽度动态工作的常规修复 - 因此您可以提供一些margin-top来对齐它。

见下面的演示：

＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;