html - What is a general way of equally spacing inline elements of the same type inside a div? -
i have
<div class="outerdiv" id="navbar"> <form action="page1.html"><input type="submit" value="page 1"></form> <form action="page2.html"><input type="submit" value="page 2"></form> <form action="page3.html"><input type="submit" value="page 3"></form> </div>
and these 3 form elements equally spaced within div that's wrapping them. 3 form elements of constant size small respect div, want keep general css outline in case need add form element in future. don't want give separate ids each of 3 elements , float them appropriately, if don't have to.
you can use display: flex
on parent div , flex: 1
on form elements stretch form elements cover full width off page.
http://jsfiddle.net/borglinm/wzdpf/
.outerdiv { display: flex; flex-direction: horisontal; border: solid 3px #900; } .outerdiv form { text-align: center; flex: 1; border: solid 1px #000; }
unfortunately isn't supported older browsers support table
Comments
Post a Comment