Home CSS Button sizing
Reply: 2

CSS Button sizing

Aaron K
1#
Aaron K Published in 2018-02-14 09:22:48Z

I have 3 buttons on a screen that have their sizes set, based on their padding. When a word is wrapped, the associated button gets taller as you would expect. The problem is now though that i have different sized buttons. I don't want to set them to a specific height but for them to be responsive based on the text and would like them to all be the same height.

Is there any way that you can have all buttons as tall as the tallest one.

Matthieu C
2#
Matthieu C Reply to 2018-02-14 09:38:42Z

For this kind of alignment, I use flex layout It's supported by major browsers https://www.w3schools.com/cSS/css3_flexbox.asp

<div style="display:flex;">
<button>Button 1
</button>
<button style="font-style:2em;">Button 2
</button>
<button>Button 3
</button>
</div>

See : https://jsfiddle.net/rw0a4p5j/4/

teevik
3#
teevik Reply to 2018-02-14 14:12:18Z

I'm pretty sure just adding display: flex; to the container of the buttons would do that automatically :

.container{
    display:flex;
}
<div class="container">
    <button>Test</button>
    <button>Test<br> Test</button>
    <button>Test</button>
</div>
	
	
	

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.297567 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO