表单中text input与checkbox未对齐问题求助

问题核心是普通输入框设置了width:80%且为块级元素，而复选框是行内块元素，没有和输入框保持一致的左侧对齐基准。以下是两种简单可行的解决方法：

方法一：语义化容器对齐（推荐） #

1. 把复选框和文字包裹在<label>标签中（既符合语义规范，也支持点击文字选中复选框）
2. 给这个标签设置和输入框相同的宽度，确保整体与上方输入框对齐

修改后的CSS代码 #

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.container {
    max-width: 80%;
    background-color: rgb(19, 131, 206);
    padding: 34px;
    margin: auto;
}

.container h3 {
    text-align: center;
}

input, textarea {
    width: 80%;
    display: block;
    margin-bottom: 10px;
}

/* 新增复选框容器样式 */
.container .checkbox-group {
    width: 80%;
    margin-bottom: 10px;
}

.container input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px; /* 调整复选框与文字的间距 */
}

修改后的HTML代码 #

将原复选框行替换为：

<label class="checkbox-group">
    <input type="checkbox" name="check_box" id="check_box">
    Check me
</label>

方法二：直接设置左侧缩进（快速临时方案） #

如果不想调整HTML结构，可直接给复选框添加左侧边距，让它与输入框左侧对齐：

.container input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-left: 10%; /* 计算逻辑：容器宽度80%，剩余20%左右均分，左边占10% */
}

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