html - 文本与表格中单选按钮序列的垂直对齐

Question

我正在尝试创建一个简单的反馈部分，用户可以通过单击按钮回答简单的是/否问题。所以基本的收音机功能，但想把它们伪装成美观的按钮。

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

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

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

如果可能的话，需要纯 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>

标签： htmlcssvertical-alignment

Answer 1

我已经通过删除类中的margin-bottomandoverflow属性来完成它switch-field：

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>