如何将输入框下方的两个按钮分别对齐左右两侧？

我用HTML和CSS制作一个简单页面，希望实现如下布局：输入框下方设置两个按钮，其中一个与输入框左侧对齐，另一个与输入框右侧对齐。但无论如何调整，都无法达成预期效果。以下是我的代码，恳请帮忙解决，提前感谢！

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>word_game</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="game_container">
        <h1 class="game_title">Word Game</h1>
        <div class="input_container">
            <input type="text" id="word_input" placeholder="Enter your word">
            <button class="btn" id="submit_btn">Submit</button>
            <button class="btn" id="get_letter_btn">Get Letter</button>
        </div>
    </div>
</body>
</html>

CSS代码 #

body {
    font-family: Arial, sans-serif;
    background-color: #1B1212;
    margin: 0;
    padding: 0;
}

.game_container {
    width: 80%;
    margin: 50px auto;
    background-color: #36454F;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.game_title {
    text-align: center;
}

.input_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.input_container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.btn {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px; 
}

.btn#submit_btn {
    margin-right: auto; 
}

.btn#get_letter_btn {
    margin-left: auto; 
}

问题核心在于input_container使用了flex-direction: column垂直布局，这种布局下无法直接让两个按钮分别左右对齐。可以通过给按钮单独创建一个横向flex容器来实现需求：

修改后的HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>word_game</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="game_container">
        <h1 class="game_title">Word Game</h1>
        <div class="input_container">
            <input type="text" id="word_input" placeholder="Enter your word">
            <!-- 新增按钮容器 -->
            <div class="button_container">
                <button class="btn" id="submit_btn">Submit</button>
                <button class="btn" id="get_letter_btn">Get Letter</button>
            </div>
        </div>
    </div>
</body>
</html>

修改后的CSS #

body {
    font-family: Arial, sans-serif;
    background-color: #1B1212;
    margin: 0;
    padding: 0;
}

.game_container {
    width: 80%;
    margin: 50px auto;
    background-color: #36454F;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.game_title {
    text-align: center;
}

.input_container {
    display: flex;
    flex-direction: column;
    /* 去掉align-items: center，让子元素默认占满宽度 */
    margin-top: 20px;
}

.input_container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* 新增按钮容器样式 */
.button_container {
    display: flex;
    justify-content: space-between; /* 让按钮分别靠向左右两端 */
}

.btn {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* 去掉多余的margin设置 */
}

原理说明 #

• 新增的button_container采用横向flex布局，justify-content: space-between会自动让两个按钮分别对齐容器的左右边缘；
• 去掉input_container的align-items: center后，输入框和按钮容器都会默认占满父容器宽度，确保按钮的对齐基准和输入框一致；
• 删除按钮上的margin设置，避免干扰布局逻辑。

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