table 中单选按钮序列的文本垂直对齐

Question

我正在尝试创建一个简单的反馈部分，用户可以通过单击按钮回答简单的 Yes/No 问题。如此基本的无线电功能，但想将它们伪装成美观的按钮。

为了按位置构建它们，我将文本和按钮作为元素插入 table - 但是，文本与按钮的底部对齐，如果这样看起来会更清晰它们在一行中居中对齐。

我做了尽可能多的研究，并尝试了 flex、vertical-align 等的各种组合，但无论我尝试哪种方式，都没有达到预期的效果。垂直对齐，我很欣赏，有它的复杂性，但我无法理解它们到我可以解决这个问题的地步。我可以让文本与第一个按钮居中对齐，但另一个按钮本身位于第一个按钮下方，而不是并排。

我很欣赏这里和其他地方的文章中有很多关于此类问题的问题，但是 none 我发现的解决方案似乎适用于我的特定情况，即一侧的文本，多个另一台伪装成开关按钮的收音机。我似乎找不到合适的属性组合 and/or 合适的容器来应用它们。

纯粹的 HTML / CSS 如果可能的话！

谢谢！

h5 { font-size:16px; text-align: left; font-family: Calibri; font-weight: normal; color:#8211bf;}

.switch-field {
  display: flex;
  margin-bottom: 36px;
  overflow: hidden;
  }

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  padding: 8px 16px;
  margin-right: -1px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field input:checked + label {
  background-color: #a5dc86;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

<table>
  <tr>
    <td>
      <h5>Was this helpful?</h5>
    </td>
    <td>
      <div class="switch-field">
        <input type="radio" id="radio-helpful-yes" name="switch-helpful" value="yes" />
        <label for="radio-helpful-yes">Yes</label>
        <input type="radio" id="radio-helpful-no" name="switch-helpful" value="no" />
        <label for="radio-helpful-no">No</label>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <h5>Were the instructions easy to understand & follow?</h5>
    </td>
    <td>
      <div class="switch-field">
        <input type="radio" id="radio-easy-yes" name="switch-easy" value="yes" />
        <label for="radio-easy-yes">Yes</label>
        <input type="radio" id="radio-easy-no" name="switch-easy" value="no" />
        <label for="radio-easy-no">No</label>
      </div>
    </td>
  <tr>
</table>

Answer 1

我通过删除 switch-field class 中的 margin-bottom 和 overflow 属性来完成此操作：

h5 { font-size:16px; text-align: left; font-family: Calibri; font-weight: normal; color:#8211bf;}

.switch-field {
  display: flex;
  }

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  padding: 8px 16px;
  margin-right: -1px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field input:checked + label {
  background-color: #a5dc86;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

<table>
  <tr>
    <td>
      <h5>Was this helpful?</h5>
    </td>
    <td>
      <div class="switch-field">
        <input type="radio" id="radio-helpful-yes" name="switch-helpful" value="yes" />
        <label for="radio-helpful-yes">Yes</label>
        <input type="radio" id="radio-helpful-no" name="switch-helpful" value="no" />
        <label for="radio-helpful-no">No</label>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <h5>Were the instructions easy to understand & follow?</h5>
    </td>
    <td>
      <div class="switch-field">
        <input type="radio" id="radio-easy-yes" name="switch-easy" value="yes" />
        <label for="radio-easy-yes">Yes</label>
        <input type="radio" id="radio-easy-no" name="switch-easy" value="no" />
        <label for="radio-easy-no">No</label>
      </div>
    </td>
  <tr>
</table>

Answer 2

这将解决您的问题。使显示在下方 css class

内联

.switch-field {
  display: inline;
  margin-bottom: 36px;
  overflow: hidden;
}

Answer 3

删除 margin-bottom 似乎足以实现垂直居中对齐？！

.switch-field {
  display: flex;
  /* margin-bottom: 36px;*/
  overflow: hidden;
}

table 中单选按钮序列的文本垂直对齐

Vertical alignment of text with sequence of radio buttons within a table

html

css

vertical-alignment