如何对齐复选框/单选按钮元素？

<style>
    .checkbox-group {
        display: block;
        clear: both;
    }
    .checkbox-group label {
        display: block;
        float: left;
        margin-right: 10px;
    }
</style>

<div class="checkbox-group">
    <label><input type="checkbox">选项1</label>
    <label><input type="checkbox">选项2</label>
    <label><input type="checkbox">选项3</label>
</div>

<style>
    .checkbox-group {
        display: flex;
    }
    .checkbox-group label {
        margin-right: 10px;
    }
</style>

<div class="checkbox-group">
    <label><input type="checkbox">选项1</label>
    <label><input type="checkbox">选项2</label>
    <label><input type="checkbox">选项3</label>
</div>

<style>
    table {
        width: 100%;
    }
    table td {
        padding-right: 10px;
    }
</style>

<table>
    <tr>
        <td><label><input type="checkbox">选项1</label></td>
        <td><label><input type="checkbox">选项2</label></td>
        <td><label><input type="checkbox">选项3</label></td>
    </tr>
</table>