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

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -