Question

当前代码：

Header__button

这将显示垂直列表中的选项，我真的需要使用内联css水平显示它们。

理想情况下，它看起来像这样：http://imgur.com/a/ns2nD

表中列出了多个问题，无需为每个问题指定答案标签。

Answer 1

你想这样吗？

＆＃13;

div {
  display: inline-block;
  float: left;
  text-align: center;
  width: 50px;
  margin-right: 20px;
}

＆＃13;

<tr>
  <td style="font-family: 'Josefin Sans', sans-serif;font-size: 100%;">
    Does our applying process live up to your expectations?
    <br/>
    <div>
      <p>Strongly Agree</p>
      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree">
    </div>
    <div>
      <p>Strongly Agree</p>
      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree">
    </div>
    <div>
      <p>Strongly Agree</p>
      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree">
    </div>
    <div>
      <p>Strongly Agree</p>
      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree">
    </div>

  </td>
</tr>

＆＃13;

Answer 2

使用flexbox进行水平对齐。

为每个单选按钮（0-5）创建id，并为文本定义标签。

.options {
  display: flex;
  justify-content: space-between;
}

.option {
  display: flex;
  flex-wrap: wrap;
  width: 16%;
}

.option * {
  width: 100%;
}

.option label {
  text-align: center;
  margin-bottom: 0.5em;
}

.option input {
  align-self: flex-end; /* aligns it at the bottom */
}

<tr>
  <td style="font-family: 'Josefin Sans', sans-serif;font-size: 100%;">
    Does our applying process live up to your expectations? <br/><br/>
    <div class="options">
      <div class="option">
        <label for="0">Strongly Agree</label>
        <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree">
      </div>
      <div class="option">
        <label for="1">Somewhat Agree</label>
        <input type="radio" class="myCheckbox2" id="1" name="XX" value="Somewhat Agree">
      </div>
      <div class="option">
        <label for="2">Neither Agree nor Disagree</label>
        <input type="radio" class="myCheckbox1" id="2" name="XX" value="Neither Agree nor Disagree">
      </div>
      <div class="option">
        <label for="3">Somewhat Disagree</label>
        <input type="radio" class="myCheckbox1" id="3" name="XX" value="Somewhat Disagree">
      </div>
      <div class="option">
        <label for="4">Strongly Disagree</label>
        <input type="radio" class="myCheckbox1" id="4" name="XX" value="Strongly Disagree">
      </div>
      <div class="option">
        <label for="5">Not Applicable</label>
        <input type="radio" class="myCheckbox2" id="5" name="XX" value="Not Applicable">
      </div>
    </div>
  </td>
</tr>

Answer 3

为什么要在行尾添加<br> ..？试试这个

<label>Strongly Agree<br><input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree"></label>

OR 只需删除<br>

即可

<input type="radio" class="myCheckbox2" id="0" name="XX" value="Somewhat Agree" >Somewhat Agree

Answer 4

删除所有<br>并在input

之间写下<td></td>

<table>
  <tr>
    <td style="font-family: 'Josefin Sans', sans-serif;font-size: 100%;">

      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree">Strongly Agree
    </td>
    <td>
      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Somewhat Agree">Somewhat Agree
    </td>
    <td>
      <input type="radio" class="myCheckbox1" id="0" name="XX" value="Neither Agree nor Disagree">Neither Agree nor Disagree</td>
    <td>
      <input type="radio" class="myCheckbox1" id="0" name="XX" value="Somewhat Disagree">Somewhat Disagree
    </td>
    <td><input type="radio" class="myCheckbox1" id="0" name="XX" value="Strongly Disagree">Strongly Disagree</td>
    <td>
      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Not Applicable">Not Applicable
    </td>
  </tr>
</table>

Answer 5

这是在水平方向上实现所有单选按钮的最简单方法，但最好使用标签作为文本，将其用于属性以获得更好的效果。

<tr>
    <td style="font-family: 'Josefin Sans', sans-serif;font-size: 100%;">
        Does our applying process live up to your expectations?  <br/>
            <div style="display:inline-block">
              <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree" >Strongly Agree
            </div>
            <div style="display:inline-block">
              <input type="radio" class="myCheckbox2" id="0" name="XX" value="Somewhat Agree" >Somewhat Agree
            </div>
            <div style="display:inline-block">
              <input type="radio" class="myCheckbox1" id="0" name="XX" value="Neither Agree nor Disagree" >Neither Agree nor Disagree
            </div>
            <div style="display:inline-block">
              <input type="radio" class="myCheckbox1" id="0" name="XX" value="Somewhat Disagree" >Somewhat Disagree
            </div>
            <div style="display:inline-block">
              <input type="radio" class="myCheckbox1" id="0" name="XX" value="Strongly Disagree" >Strongly Disagree
            </div>
            <div style="display:inline-block">
              <input type="radio" class="myCheckbox2" id="0" name="XX" value="Not Applicable" >Not Applicable
            </div>
      </td>
</tr>

在表格中水平显示单选按钮选项？

5 个答案: