CODEWITHSUNDEEP
javascripthtmlcss
Nitesh Ranjan
Nitesh Ranjan

Reputation: 1329

How to align items in a row using CSS?

I have three buttons and i want to align them in a row and they should get equal space.

For example i have something like this:-

<div class='parent'>
  <button class='child'> Button 1 </button>
  <button class='child'> Button 2 </button>
  <button class='child'> Button 3 </button>
</div>

Now i want to align all the buttons in a single row having equal space so that if i add another button in future i don't need to worry and every button will have equal space.

Upvotes: 6

Views: 25420

Answers (4)

Shahriyar Ahmed
Shahriyar Ahmed

Reputation: 550

You should study about Flex. Here is solution...

.parent {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.child {
  
}
<div class='parent'>
  <button class='child'> Button 1 </button>
  <button class='child'> Button 2 </button>
  <button class='child'> Button 3 </button>
</div>

Upvotes: 2

Nitesh Ranjan
Nitesh Ranjan

Reputation: 1329

.parent {
  display: flex;
}

.child {
  flex: 1;
}

Link for the above code

Upvotes: 0

Choolwe Chiti Chilinda
Choolwe Chiti Chilinda

Reputation: 11

.child {
  display: inline-flex;
  margin-right:1.5em;
}

Upvotes: 1

Cata John
Cata John

Reputation: 1401

This will work. I highly recommend you to read more about flex as this is essential for CSS styiling.

.parent {
  display: flex;
  justify-content: space-between;
}
<div class='parent'>
  <button class='child'> Button 1 </button>
  <button class='child'> Button 2 </button>
  <button class='child'> Button 3 </button>
</div>

Upvotes: 10

Related Questions