Html - Set two buttons below the input field aligned on both sides

Mortdecai
February 9, 2024
159 views
2 votes
3 Answers

I’m trying to create a simple page using CSS and HTML, but I can’t seem to align the elements the way I want. I have one input element and two buttons, I want the buttons to be below the input element, one button aligned with the left side of the input element and the other button with the right side of the input element.

No matter what I do, I can’t get it to work. I will provide a code and screenshot if anyone can help me I would be grateful, thank you in advance!

Image link

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; 
}

Tags: css html

Answers

Take a look at this class:

.input_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

Added: flex-wrap: wrap and justify-content: space-between

Removed: flex-direction: column

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-wrap: wrap;
    justify-content: space-between;
    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; 
}

<!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>

Use the below code and you can set all two buttons to the same line.

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-wrap: wrap;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    justify-content: space-between;
}

.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;
}

<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>

No need to give a margin for both button.

The solution using CSS flex layout.

<!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="styles.css">
</head>
<body>
    <div class="game_container">
        <h1 class="game_title">Word Game</h1>
        <div class="input_container">
            <div class="btnClassFlex"> 
                <input type="text" id="word_input" placeholder="Enter your word">
             </div>
            <div class="btnClassFlex"> 
              <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;
    width:100%;
}

.input_container input {
    flex: 1; /* Add this line to make the input field take up remaining space */
    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; 
}

.btnClassFlex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  align-items: flex-start;
  width: 100%;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Set two buttons below the input field aligned on both sides

Answers