html - Expand div according to the inner text -
i've got following div elements in html. act buttons.
<div id="button-section"> <!-- section function buttons --> <div class="fn-button"> <!-- function button --> <span>my current checks</span> </div> <div class="fn-button"> <!-- function button --> <span>all current checks</span> </div> <div class="fn-button"> <!-- function button --> <span>add new order</span> </div> </div>
this css i've used there elements.
#button-section{ width: 100%; height: 150px; position: fixed; bottom: 0; background-color: rgb(229, 229, 255); } .fn-button{ width: 130px; height: 50px; float: left; margin: 10px 0px 0px 20px; border-radius: 10px; background: rgb(111, 111, 111); box-shadow: inset 1px 4px 12px rgb(0, 0, 0); text-align: center; } .fn-button span{ padding: 0px; margin: 0px 0px 0px 0px; color: white; vertical-align: -17px; font-size: 20px; }
the thing is, need adjust width according text inside each div element.! either have define width each element or find method. below image display situation of divs.
how can dynamically expand divs according inner text?
remove width
rule divs (width: 130px
).
this ends looking little scrunched, can fix padding
padding-left: 5px; padding-right: 5px;
Comments
Post a Comment