如何将文本框与按钮纵向排列？含标签与居中按钮布局需求

没问题！我给你两种实用的实现方式，都能完美满足你「文本框带对应标签、纵向排列、按钮居中」的需求：

方案一：传统语义化表单布局（兼容所有浏览器） #

这种方式用标准的表单元素搭配基础CSS，语义清晰且兼容性拉满：

<!DOCTYPE html>
<html>
<head>
    <style>
        .form-group {
            margin: 10px 0; /* 给每组标签+输入框加间距 */
            display: flex;
            flex-direction: column; /* 纵向排列标签和输入框 */
            width: 300px; /* 限制表单宽度，避免太宽 */
        }
        label {
            margin-bottom: 5px; /* 标签和输入框之间留小间距 */
            font-weight: 500;
        }
        input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .submit-btn {
            margin-top: 15px;
            padding: 10px 20px;
            width: fit-content; /* 按钮宽度适配内容 */
            margin-left: auto;
            margin-right: auto; /* 左右auto实现水平居中 */
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <div class="form-group">
            <label for="equation">equation</label>
            <input type="text" id="equation" placeholder="输入方程">
        </div>
        <div class="form-group">
            <label for="a-value">A value</label>
            <input type="text" id="a-value" placeholder="输入A值">
        </div>
        <div class="form-group">
            <label for="b-value">B value</label>
            <input type="text" id="b-value" placeholder="输入B值">
        </div>
        <button class="submit-btn">提交</button>
    </div>
</body>
</html>

关键细节说明： #

• 用<label>标签和<input>的id绑定，点击标签就能聚焦对应输入框，提升用户体验和无障碍性
• 每组标签+输入框用.form-group包裹，通过flex-direction: column实现纵向排列
• 按钮通过margin-left: auto+margin-right: auto实现水平居中

方案二：Flexbox整体布局（更简洁现代） #

如果你的项目已经在用Flexbox，这种方式代码更简洁，布局更灵活：

<!DOCTYPE html>
<html>
<head>
    <style>
        .form-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 让表单元素左对齐 */
            width: 300px;
            margin: 0 auto; /* 整个表单居中（可选） */
        }
        .form-container label {
            margin: 10px 0 5px;
            font-weight: 500;
        }
        .form-container input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%; /* 输入框占满容器宽度 */
        }
        .form-container button {
            margin-top: 15px;
            padding: 10px 20px;
            align-self: center; /* 按钮单独居中 */
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <label for="equation">equation</label>
        <input type="text" id="equation" placeholder="输入方程">
        
        <label for="a-value">A value</label>
        <input type="text" id="a-value" placeholder="输入A值">
        
        <label for="b-value">B value</label>
        <input type="text" id="b-value" placeholder="输入B值">
        
        <button>提交</button>
    </div>
</body>
</html>

关键细节说明： #

• 整个表单容器用flex-direction: column实现所有元素纵向排列
• 输入框设置width: 100%占满容器宽度，布局更规整
• 按钮用align-self: center直接在Flex容器中实现水平居中，无需额外margin调整

你可以根据自己的项目需求选择其中一种方案，两种都能完美实现你要的效果哦！

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