在单选按钮之间的行 [英] line between radio button in css

问题描述

我做了这样的单选按钮：



我想在我的单选按钮之间画线在这样的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 =answerid =answer_1type =radio> 
< / td> 
< td> 
< input name =answerid =answer_2type =radio> 
< / td> 
< td> 
< input name =answerid =answer_3type =radio> 
< / td> 
< td> 
< input name =answerid =answer_4type =radio> 
< / td> 
< td> 
< input name =answerid =answer_5type =radio> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
  

你可以在这里看到结果：
https://jsfiddle.net/zpejzpw5/

如何在单选按钮之间画线？

解决方案

使用此代码

td {text-align：center} .line td {position：relative;}。line td：after {content：''; border-bottom：1px solid #ccc;宽度：100％; height：1px;位置：绝对;顶部：50％;剩下：50％; transform：translate（0，-100％）; line-t：last-child：after {display：none;}}

 < span id =reponses> <表> < 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 =answerid =answer_1type =radio> < / TD> < TD> < input name =answerid =answer_2type =radio> < / TD> < TD> < input name =answerid =answer_3type =radio> < / TD> < TD> < input name =answerid =answer_4type =radio> < / TD> < TD> < input name =answerid =answer_5type =radio> < / TD> < / TR> < / tbody的> < / table>< / span>  

I've made radio button like this :

and I want to draw line between my radio button in css like this :

I made my form look like this with table tag.

    <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>

You can see the result here : https://jsfiddle.net/zpejzpw5/
How can I draw line between my radio button?

解决方案

Use this code

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;
}
}

<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>

这篇关于在单选按钮之间的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！