CODEWITHSUNDEEP
htmlcss
Suraj
Suraj

Reputation: 2563

align two buttons horizontal to each other

How can I align two buttons horizontal to each other.

<input type="submit" class="app-button" id="btnSearch" value="Aply Filters"><br>
<input type="submit" class="app-button" id="btnClearSearch" value="Clear Filters">

Below is the CSS I am using.

.app-button{
     list-style: none;
     text-align: center;
     background-color: #01AAAD;
     width: 150px;margin:0;
     line-height: 60px;
}

Fiddle

Upvotes: 2

Views: 19882

Answers (4)

Mamikon Arakelyan
Mamikon Arakelyan

Reputation: 166

I think you need something like this

(I only remove <br>, and wrap it into .row).

.app-button{
    background-color: #01AAAD;
    width: 150px;
    margin:0 20px;
    display:inline-block;
    line-height: 60px;
}
.row{
  text-align:center;
  /*the same margin which is every button have, it is for small screen, and if you have many buttons.*/
  margin-left:-20px;
  marin-right:-20px;
}
<div class="row">
   <input type="submit" class="app-button" id="btnSearch" value="Aply Filters">
   <input type="submit" class="app-button" id="btnClearSearch" value="Clear Filters">
 </div>

Upvotes: 2

Panda
Panda

Reputation: 37

A simple method: HTML:

<div>
<input type="button" value="button1" /><input type="button" value="button2" />
</div>

CSS:

div { padding: 10px; border: 1px solid black; }
input { margin: 0; }

Upvotes: 1

anoraq
anoraq

Reputation: 515

list-style is not needed. That's something used for ul and ol elements. You have two inputs, so one way would be : 

.app-button {
    display:inline-block;
    text-align: center;
    background-color: #01AAAD;
    width: 150px;margin:0;
    line-height: 60px;
}

And with some space between maybe?

 .app-button:first-of-type {
    margin-right:15px;
 }

Upvotes: 0

1990rk4
1990rk4

Reputation: 768

try this;

 .app-button{
     list-style: none;
     text-align: center;
     background-color: #01AAAD;
     width: 150px;margin:0;
     line-height: 60px;
     float: left;
   }

or you can try, overFlow:hidden;

Upvotes: 1

Related Questions