技术求助：如何将Checkbox对齐至文本右侧？

方法一：直接调整HTML元素顺序 #

最简单的方式就是把文本内容放在<input>标签前面，复选框/单选框自然就会出现在文本右侧：

<li>Angry <input type="checkbox" name="emoticon 1" value="angry"></li>
<li>Very satisfied <input type="radio" name="rating" value="very satisfied"></li>

方法二：使用CSS控制布局（无需修改HTML顺序） #

如果不想调整HTML结构，可以用CSS的Flex布局或者定位实现：

1. Flex布局方案：给包含input和文本的<li>设置弹性布局，让元素两端对齐：

/* 给目标列表项添加类名，避免影响其他元素 */
.checkbox-item, .radio-item {
  display: flex;
  justify-content: space-between;
  width: 180px; /* 可根据需求调整宽度 */
}

给对应的列表项加上类名即可：

<li class="checkbox-item"><input type="checkbox" name="emoticon 1" value="angry"> Angry</li>
<li class="radio-item"><input type="radio" name="rating" value="very satisfied"> Very satisfied</li>

2. 绝对定位方案：

.checkbox-item, .radio-item {
  position: relative;
  padding-right: 20px; /* 给控件留出显示空间 */
}
.checkbox-item input, .radio-item input {
  position: absolute;
  right: 0;
}

修正后的完整代码（含优化） #

原代码存在几处小问题（多余的</li>、单选框name不统一、textarea属性错误），以下是修复并调整后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>Page title</title>
    <style>
        /* 可选：若使用方法一可删除此样式块 */
        .checkbox-item, .radio-item {
            display: flex;
            justify-content: space-between;
            width: 180px;
        }
    </style>
</head>
<body>
    <h1>My feedback form</h1>
    <form>
        <ul>
            <li>Name: <input name="name" type="text"></li>
            <li>Email: <input name="email" type="email"></li>
            <li>Password: <input name="Password" type="Password"></li><br>
            <li>Please check all the emoticons that apply to you:</li>
            <ul type="disc">
                <!-- 方法一写法：调整元素顺序 -->
                <li>Angry <input type="checkbox" name="emoticon 1" value="angry"></li>
                <li>Sad <input type="checkbox" name="emoticon 2" value="Sad"></li>
                <li>Happy <input type="checkbox" name="emoticon 3" value="Happy"></li>
                <li>Ambivalent <input type="checkbox" name="emoticon 4" value="Ambivalent"></li>
            </ul>
            <li>How satisfied were you with our service?</li>
            <ul type="disc">
                <!-- 方法二写法：用CSS控制布局 -->
                <li class="radio-item"><input type="radio" name="rating" value="very satisfied"> Very satisfied</li>
                <li class="radio-item"><input type="radio" name="rating" value="Satisfied">Satisfied</li>
                <li class="radio-item"><input type="radio" name="rating" value="Didn't care">Didn't care</li>
                <li class="radio-item"><input type="radio" name="rating" value="Dissatisfied">Dissatisfied</li>
                <li class="radio-item"><input type="radio" name="rating" value="very dissatisfied">Very dissatisfied</li>
            </ul>
            <li>Further comments: <textarea name="description"></textarea></li>
        </ul>
    </form>
</body>
</html>

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