css单选按钮之间的线

Question

我做了这样的单选按钮：

我想在css中的单选按钮之间绘制线条，如下所示：

我使用表格标签使我的表单看起来像这样。

    <table>
    <tbody>
        <tr>
            <td>
                <label for="answer_1">1</label>
            </td>

            <td>
                <label for="answer_2">2</label>
            </td>
            <td>
                <label for="answer_3">3</label>
            </td>
            <td>
                <label for="answer_4">4</label>
            </td>
            <td>
                <label for="answer_5">5</label>
            </td>
        </tr>
        <tr>
            <td>
                <input name="answer" id="answer_1" type="radio">
            </td>
            <td>
                <input name="answer" id="answer_2" type="radio">
            </td>
            <td>
                <input name="answer" id="answer_3" type="radio">
            </td>
            <td>
                <input name="answer" id="answer_4" type="radio">
            </td>
            <td>
                <input name="answer" id="answer_5" type="radio">
            </td>
        </tr>
    </tbody>
</table>

您可以在此处查看结果： https://jsfiddle.net/zpejzpw5/
如何在我的单选按钮之间画线？

Answer 1

使用:after伪元素，你应该能够做到这一点：

＆＃13;

＆＃13;

td input {
  position: relative;
}
td input:after {
    display: block;
    content: " ";
    position: absolute;
    bottom: 6px;
    background: #000;
    height: 2px;
    width: 100%;
    right: -12px;
}
td:last-child input:after {
  display: none;
}

＆＃13;

<table>
    <tbody>
        <tr>
            <td>
                <label for="answer_1">1</label>
            </td>

            <td>
                <label for="answer_2">2</label>
            </td>
            <td>
                <label for="answer_3">3</label>
            </td>
            <td>
                <label for="answer_4">4</label>
            </td>
            <td>
                <label for="answer_5">5</label>
            </td>
        </tr>
        <tr>
            <td>
                <input name="answer" id="answer_1" type="radio">
            </td>
            <td>
                <input name="answer" id="answer_2" type="radio">
            </td>
            <td>
                <input name="answer" id="answer_3" type="radio">
            </td>
            <td>
                <input name="answer" id="answer_4" type="radio">
            </td>
            <td>
                <input name="answer" id="answer_5" type="radio">
            </td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用此代码

＆＃13;

＆＃13;

td {
  text-align: center
}
.line td {
  position: relative;
}
.line td:after {
  content: '';
  border-bottom: 1px solid #ccc;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(0, -100%);
  z-index: -1;
}
.line td:last-child:after {
  display: none;
}
}

＆＃13;

<span id="reponses">
  <table>
    <tbody>
      <tr>
        <td>
          <label for="answer_1">1</label>
        </td>
        <td>
          <label for="answer_2">2</label>
        </td>
        <td>
          <label for="answer_3">3</label>
        </td>
        <td>
          <label for="answer_4">4</label>
        </td>
        <td>
          <label for="answer_5">5</label>
        </td>
      </tr>
      <tr class="line">
        <td>
          <input name="answer" id="answer_1" type="radio">
        </td>
        <td>
          <input name="answer" id="answer_2" type="radio">
        </td>
        <td>
          <input name="answer" id="answer_3" type="radio">
        </td>
        <td>
          <input name="answer" id="answer_4" type="radio">
        </td>
        <td>
          <input name="answer" id="answer_5" type="radio">
        </td>
      </tr>
    </tbody>
  </table>
</span>

＆＃13;

＆＃13;

＆＃13;