div 안에 같은 유형의 인라인 요소를 동일하게 간격을 두는 일반적인 방법은 무엇입니까?

Question

나는

<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> 

을하고 난 다음 3 개 폼 요소가 똑같이 포장 것 사업부 내에두고 싶습니다. 3 개의 양식 요소는 div에 비해 작은 크기로 일정하므로 앞으로 다른 양식 요소를 추가해야하는 경우를 대비하여 일반적인 CSS 개요를 유지하려고합니다. 3 가지 요소 각각에 별도의 ID를 부여한 다음 적절하게 부동화하고 싶지는 않습니다.

Answer 1

상위 div에는 display: flex을 사용하고 양식 요소에는 flex: 1을 사용하여 양식 요소를 늘려 페이지의 전체 너비를 커버 할 수 있습니다.

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; 
} 

불행하게도이 Support table

Answer 2

컨테이너에 display:table를 사용해보십시오 오래된 브라우저에서 지원하고, table-row 및 table-cell 요소가되지 않습니다.