HTML中如何实现radio单选框与checkbox复选框的缩进效果

实现方法 #

你可以通过两种简单方案实现复选框区域整体缩进：

方案1：表格布局适配（无需额外CSS）

利用表格的单元格占位实现缩进，在需要缩进的tr首列增加空<td>占位，同时给上方"Select from 1"和单选框所在行的首单元格增加colspan属性占满列宽：

<tr>
    <td>
        <table>
            <!-- 标题行占2列，和下方单选框行总列数一致 -->
            <tr>
                <td colspan="2">Select from 1</td>
            </tr>
            <tr>
                <td><INPUT name="all" type="radio"></td>
                <td>all item</td>
            </tr>
            <!-- 复选框行前面加空td占位，实现整体缩进 -->
            <tr>
                <td></td>
                <td><INPUT name="x" type="checkbox"></td>
                <td>x item<INPUT TYPE="text" size="8"></td>
            </tr>
            <tr>
                <td></td>
                <td><INPUT name="y" type="checkbox"></td>
                <td>y item<INPUT TYPE="text" size="8"></td>
            </tr>
        </table>
        <table>
            <tr>
                <td>Select from 2</td>
            </tr>
        </table>
    </td>
</tr>

方案2：CSS缩进控制

给需要缩进的tr的首个单元格加左内边距，不需要改动表格列结构，适配性更强，缩进距离可按需调整像素值：

<tr>
    <!-- 直接加内联样式实现缩进 -->
    <td style="padding-left: 20px;"><INPUT name="y" type="checkbox"></td>
    <td>y item<INPUT TYPE="text" size="8"></td>
</tr>

如果有多个缩进行，也可以统一定义类样式复用：

.indent {
    padding-left: 20px;
}

后续只需给需要缩进的行首单元格添加class="indent"即可。

内容的提问来源于stack exchange，提问作者boka