Question 46132 in CSS Question posted in
Some basic documentation can be found here.

What code can I use to make my button fall to the left – CSS

I’m designing an app and I can’t seem to think of a CSS ruleset to make a button fall to the left. This is an image of what I have

So I’m basically trying to make the reset button fall to the left of the number, that is, to the point circled below.This is the point I want the reset button to beI need a CSS ruleset to achieve this.

This is the general CSS code for all the buttons.

button {
    font-size: 2rem;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    margin: 10px;
}

NB: Float won’t help in this case

h1 {
  font-size: 4rem;
}

.counting {
  text-align: center;
  margin-top: 60px;
}

button {
  font-size: 2rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  margin: 10px;
}


/* 
.resetContainer{
        display: flex;
        /* flex-direction: row; */


/* } */


/* .reset{
    margin: 0 0 0 30px;
    padding: 10px 20px;
    } */

button:hover {
  background-color: #2c3e50;
  color: red;
  cursor: pointer;
}
<body>
  <div class="counting">
    <h1 class>Counter</h1>
    <button>Increment</button>
    <!-- <div class="resetContainer"> -->
    <button class="reset">Reset</button>
    <!-- </div> -->
    <p>0</p>
    <button>Decrement</button>
    <button>Set Value</button>

  </div>
Tags:

3

Answers


  1. 0

    You can place reset button at left using this way

        <!DOCTYPE html>
    <html>
    <title> CSS </title>
    <head>
    <style>
    
    #resetcontainer{
        display: flex;
        flex-direction: row;
    }
    
    #reset{
            margin-right: 30px;
        padding: 10px;
    }
    </style>
    </head>
    <body>
    <div id="resetcontainer">
        <button id="reset">Reset</button>
        <p>0</p>
    </div>
    </body>
    </html>
    Login or Signup to reply.
  2. 0

    Please read the add post guideline properly before posting. If you added your code with the post it would be more easy to solve this problem. I don’t know how you wrote the code but here I’m trying to give you a solution.

    Create a parent div and put the button inside if it.

    <div class="reset-parent">
    <button class="reset-btn">Reset</button>
</div>

    CSS

    .reset-parent {
    display: flex;
}

.reset-parent .reset-btn {
    margin: 0 0 0 30px;
    padding: 10px 20px;
}

    Again, I’m not sure how you wrote the code so it is not possible to give you an exact solution. But you can follow this way, hopefully it’ll help you.

    Login or Signup to reply.
  3. 0

    If you want the reset button and the number in same row, use the code here. I put the button and number inside a div so that it’ll be in the same row.

    <div class="counting">
    <h1 class>Counter</h1>
    <button>Increment</button>
    <div class="reset-number">
        <button class="reset">Reset</button>
        <p>0</p>
    </div>
    <button>Decrement</button>
    <button>Set Value</button>
</div>

    CSS

    h1 {
    font-size: 4rem;
}
p{
    font-size: 40px;
}
.counting {
    border: 2px solid red;
    margin-top: 60px;
    text-align: center;
}
button {
    font-size: 2rem;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    margin: 10px;
}
.reset-number{
    display: flex;
    justify-content: center;
    gap: 50px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search