form表单中如何使文本和输入框对齐？

Question

以下是我的代码，如何使文本和输入框对齐

<form class="form-inline">      <!--内联表单-->
    <div style="padding-top:10px">
        <div>
            <label>姓名</label>
            <input type="text" class="form-control" placeholder="姓名">
            <label style="margin:10px">性别</label>
            <input type="text" class="form-control" placeholder="性别">
        </div>
        <div>
            <label style="padding-top:20px">出生年月</label>
            <input type="text" class="form-control" id="birthday" placeholder="出生年月">
        </div>
    </div>
</form>

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

为了使文本和输入框对齐，你可以使用CSS样式来设置布局和对齐方式。在你的代码中，可以使用一些样式调整标签和输入框的位置。以下是一个修改后的示例代码，展示了如何使用CSS样式使文本和输入框对齐：

<style>
    .form-label {
        display: block; /* 将标签设置为块级元素 */
        margin-bottom: 5px; /* 标签与输入框之间的间距 */
    }
    .input-wrapper {
        margin-left: 10px; /* 调整输入框的位置 */
    }
</style>

<form class="form-inline"> <!--内联表单-->
    <div style="padding-top: 10px;">
        <div>
            <label class="form-label">姓名</label> <!-- 添加类名以应用样式 -->
            <div class="input-wrapper"> <!-- 添加包裹输入框的容器 -->
                <input type="text" class="form-control" placeholder="姓名">
            </div>
            <label class="form-label" style="margin: 5px;">性别</label> <!-- 调整间距 -->
            <div class="input-wrapper"> <!-- 添加包裹输入框的容器 -->
                <input type="text" class="form-control" placeholder="性别">
            </div>
        </div>
        <div>
            <label class="form-label">出生年月</label> <!-- 应用相同的样式 -->
            <div class="input-wrapper"> <!-- 添加包裹输入框的容器 -->
                <input type="text" class="form-control" id="birthday" placeholder="出生年月">
            </div>
        </div>
    </div>
</form>

在上述代码中，我为标签（<label>）添加了一个类名 form-label，并为输入框添加了一个包裹容器 <div class="input-wrapper">。通过调整这些元素的样式，你可以更好地控制文本和输入框的对齐方式。你可以根据需要进一步调整样式属性，以达到你期望的布局效果。