从一个div或td的中间到另一个的中间的线

Question

对于在线调查，我想显示比例：

单选按钮和文本使用表格进行布局。如何从左侧文本和单选按钮的中间到右侧文本和单选按钮的中间绘制比例线？

如果可能，请勿使用图形。

---

相关代码：

.align_center {
    text-align: center;
    }

<table>
    <tr>
            <td></td>
        <td class="align_center">disagree</td>
        <td></td>
        <td></td>
        <td></td>
        <td class="align_center">agree</td>
    </tr>
    <tr>
        <td></td>
        <td class="align_center">1</td>
        <td class="align_center">2</td>
        <td class="align_center">3</td>
        <td class="align_center">4</td>
        <td class="align_center">5</td>
    </tr>
    <tr>
        <td>Stackoverflow is great</td>
        <td class="align_center"><input name="so" value="1" type="radio"></td>
        <td class="align_center"><input name="so" value="2" type="radio"></td>
        <td class="align_center"><input name="so" value="3" type="radio"></td>
        <td class="align_center"><input name="so" value="4" type="radio"></td>
        <td class="align_center"><input name="so" value="5" type="radio"></td>
    </tr>
</table>

Answer 1

这是一种方法，感觉有点复杂但应该易于扩展。它确实需要远离基于table的布局（我认为这是一个加号，老实说），而是使用嵌套列表：

<ol>
    <li>
        <ul class="header">
            <li class="header"></li>
            <li class="indicator"></li>
            <li class="indicator"></li>
            <li class="indicator"></li>
            <li class="indicator"></li>
            <li class="indicator"></li>
        </ul>
    </li>
    <li>
        <ul>
            <li class="header">Stack Overflow is:</li>
            <li class="grade">
                <input type="radio" name="SO" />
            </li>
            <li class="grade">
                <input type="radio" name="SO" />
            </li>
            <li class="grade">
                <input type="radio" name="SO" />
            </li>
            <li class="grade">
                <input type="radio" name="SO" />
            </li>
            <li class="grade">
                <input type="radio" name="SO" />
            </li>
        </ul>
    </li>
</ol>

使用以下CSS：

ol, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    float: left;
}

li {
    height: 1.4em;
    line-height: 1;
}

li.header {
    width: 10em;
}

/* just in case you set a default background-color for the headers */
li.header:empty {
    background-color: transparent;
}

li.indicator,
li.grade {
    width: 2em;
    text-align: center;
}

li.indicator {
    position: relative;
    border-top: 1px solid #000;
}

li.header + li.indicator,
li.indicator:last-child {
    border-width: 0;
}

li.indicator::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 80%;
    left: 50%;
    right: 48%;
    border-left: 1px solid #000;
}

li.header + li.indicator::before {
    border-top: 1px solid #000;
    right: 0;
}

li.indicator:last-child::before {
    border-left-width: 0;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    left: 0;
}

/* gives the scale numbers for the inputs */
ol ul {
    counter-reset: scale;
}

ol ul li.indicator::after {
    counter-increment: scale;
    content: counter(scale, decimal);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

JS Fiddle demo