css - Text and button different font size on same line -
i have button , text on same line. have different font size. button has padding. in browser seems text on same line, padding goes below big text. want bottom button padding on same line big text. in other words, shift text bit down or button bit up.
here's css
.bigtext { font-size: 200%; border-bottom: 1px solid #999; } .button-container { display: inline-block; } .button-container button { font-size: 40%; padding: 5px; border-radius: 5px; border: 1px solid #d3d3d3; }
fiddle: http://jsfiddle.net/7ydtgb7x/
if want simple way can add "position: relative;" , "bottom: 5px;" button.
if need let me know adding comment. there 3 kind of positions:
relative follows flow.
absolute follows flow.
and fixed gets out of flow.
.bigtext { font-size: 200%; border-bottom: 1px solid #999; } .button-container { display: inline-block; } .button-container button { font-size: 40%; padding: 5px; border-radius: 5px; border: 1px solid #d3d3d3; position: relative; bottom: 5px; }
<div class="bigtext"> test <div class="button-container"> <button>button</button> </div> </div>
Comments
Post a Comment