将包装文本与其上方的文字对齐

Question

在我正在设计的Web应用程序中，我有两列，每列包含许多复选框和相应的标签。该应用程序是响应式的，并使用Foundation Web框架。在较小的屏幕上，较长的标签名称将换行到下一行。我在下面的代码片段中模拟了类似的情况，我的标签和复选框上的相关样式由我正在使用的样式表提供。

最初，我有类似这样的东西，当屏幕足够小以至于它们不能再放在同一条线上时，会导致标签显示在一个完全独立的行上而不是复选框上。

＆＃13;

＆＃13;

.container {
  width: 49.5%;
  display: inline-block;
}
label {
  display: inline-block;
  line-height: 1.5;
  margin-left .5rem;
  margin-right: 1rem;
  margin-bottom: 0;
  vertical-align: baseline;
}

＆＃13;

<div class="container">
  <input id="fr_checkbox" type="checkbox">
  <label for="fr_checkbox">LONG NAME FOR LABEL THAT WILL WRAP</label>
</div>
<div class="container">
  <input id="fr_checkbox2" type="checkbox">
  <label for="fr_checkbox2">LONG NAME FOR LABEL THAT WILL WRAP</label>
</div>

＆＃13;

＆＃13;

＆＃13;

我删除了标签上的display: inline-block，这有帮助。现在它将在复选框的同一行显示标签，然后将任何溢出包装到下一行。

＆＃13;

＆＃13;

.container {
  width: 49.5%;
  display: inline-block;
}
label {
  line-height: 1.5;
  margin-left .5rem;
  margin-right: 1rem;
  margin-bottom: 0;
  vertical-align: baseline;
}

＆＃13;

<div class="container">
  <input id="fr_checkbox" type="checkbox">
  <label for="fr_checkbox">LONG NAME FOR LABEL THAT WILL WRAP</label>
</div>
<div class="container">
  <input id="fr_checkbox2" type="checkbox">
  <label for="fr_checkbox2">LONG NAME FOR LABEL THAT WILL WRAP</label>
</div>

＆＃13;

＆＃13;

＆＃13;

我想要发生的是标签包装到下一行，如上面的代码段，但也与其上方的文本对齐，而不是容器的左侧，如下图所示

Answer 1

快速解决此问题

＆＃13;

＆＃13;

.container {
  width: 49.5%;
  display: table;
}
label {
  line-height: 1.5;
  margin-left .5rem;
  margin-right: 1rem;
  margin-bottom: 0;
  vertical-align: baseline;
  display: table-cell;
}

＆＃13;

<div class="container">
  <input id="fr_checkbox" type="checkbox">
  <label for="fr_checkbox">LONG NAME FOR LABEL THAT WILL WRAP</label>
</div>
<div class="container">
  <input id="fr_checkbox2" type="checkbox">
  <label for="fr_checkbox2">LONG NAME FOR LABEL THAT WILL WRAP</label>
</div>

＆＃13;

＆＃13;

＆＃13;