如何实现表单输入框的两列布局？附现有代码求助

我在项目式学习中制作了一个表单，已通过设置container主容器及内部left、right两个div，利用float属性实现页面左右分栏（左侧div展示背景图，右侧div承载表单）。我希望将表单内输入框设置为两列布局：first name与last name同行，email与telephone同行，password与confirm password同行。尝试过flex属性但未成功，寻求实现方法。

原代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css" type="text/css">
    <title>Document</title>
</head>

<body>

    <div class="container">
        <div class="left">
            <div class="bg">
                <img src="odin-lined.png" alt="">
                <h1>ODIN</h1>
            </div>
        </div>

        <div class="right">
            <p>This is not a real online service! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Necessitatibus, commodi!

                Sign up now to get started.</p>

            <form action="">
                <div class="input">
                    <label for="first name">FIRST NAME</label>
                    <input type="text">
                </div>
                <div class="input">
                    <label for="last name">LAST NAME</label>
                    <input type="text">
                </div>
                <div class="input">
                    <label for="email">EMAIL</label>
                    <input type="email">
                </div>

                <div class="input">
                    <label for="telephone">TELEPHONE</label>
                    <input type="tel">
                </div>

                <div class="input">
                    <label for="password">PASSWORD</label>
                    <input type="password">
                </div>
                <div class="input">
                    <label for="password">CONFIRM PASSWORD</label>
                    <input type="password">
                </div>
            </form>

        </div>
    </div>

</body>

</html>

CSS代码 #

.left{
    float: left;
    width: 50%;
}

.right{
    float: right;
    width: 50%;
 
}

.bg{
    background-image: url('background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    width: 500px;
}

.bg img{
    width: 150px;
    height: 150px;
    margin: 40px;
}

修正后的实现方案 #

修改后的HTML代码 #

核心是给每一组同行的输入框添加.form-row容器，同时修正label的for属性与input的id对应（不能包含空格）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css" type="text/css">
    <title>Document</title>
</head>

<body>

    <div class="container">
        <div class="left">
            <div class="bg">
                <img src="odin-lined.png" alt="">
                <h1>ODIN</h1>
            </div>
        </div>

        <div class="right">
            <p>This is not a real online service! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Necessitatibus, commodi!

                Sign up now to get started.</p>

            <form action="">
                <!-- 第一行：first name + last name -->
                <div class="form-row">
                    <div class="input">
                        <label for="first-name">FIRST NAME</label>
                        <input type="text" id="first-name">
                    </div>
                    <div class="input">
                        <label for="last-name">LAST NAME</label>
                        <input type="text" id="last-name">
                    </div>
                </div>
                <!-- 第二行：email + telephone -->
                <div class="form-row">
                    <div class="input">
                        <label for="email">EMAIL</label>
                        <input type="email" id="email">
                    </div>
                    <div class="input">
                        <label for="telephone">TELEPHONE</label>
                        <input type="tel" id="telephone">
                    </div>
                </div>
                <!-- 第三行：password + confirm password -->
                <div class="form-row">
                    <div class="input">
                        <label for="password">PASSWORD</label>
                        <input type="password" id="password">
                    </div>
                    <div class="input">
                        <label for="confirm-password">CONFIRM PASSWORD</label>
                        <input type="password" id="confirm-password">
                    </div>
                </div>
            </form>

        </div>
    </div>

</body>

</html>

修改后的CSS代码 #

添加表单行布局样式，优化输入项的显示效果：

.left{
    float: left;
    width: 50%;
}

.right{
    float: right;
    width: 50%;
    padding: 2rem;
    box-sizing: border-box; /* 内边距不额外增加宽度 */
}

.bg{
    background-image: url('background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    width: 500px;
}

.bg img{
    width: 150px;
    height: 150px;
    margin: 40px;
}

/* 表单行：flex横向排列 */
.form-row {
    display: flex;
    gap: 2rem; /* 同行输入框间距 */
    margin-bottom: 1.5rem; /* 行与行之间的间距 */
}

/* 输入项容器：垂直排列标签和输入框 */
.input {
    flex: 1; /* 平分行内可用宽度 */
    display: flex;
    flex-direction: column;
}

/* 输入框样式优化 */
.input input {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

.input label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

实现说明 #

1. 分组容器：用.form-row包裹每一组同行的输入框，通过display: flex实现横向排列。
2. 宽度分配：给.input设置flex:1，让每个输入项自动平分当前行的可用宽度，保证两列布局均匀。
3. 间距控制：用gap控制同行输入框的水平间距，margin-bottom控制行之间的垂直间距。
4. 样式优化：调整输入框和标签的样式，提升可读性；给右侧容器添加内边距，避免表单内容紧贴边缘。
5. 规范修正：修正了label的for属性和input的id（不能包含空格），确保表单关联功能正常。

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