試圖在中心做一個簡單的水平對齊

Question

我想在一個盒子裏有4個水平的div，但是它們沒有對齊。假設我想要水平添加4個，5個，6個或7個小盒子，我該怎麼做？這是我的HTML和CSS代碼如下。前3個對齊好，但是當我添加其他時，它只是把它們放在其他地方

這是我的情況下的鏈接。它在一個所有在底部

http://codepen.io/willc86/pen/hpFLe

#box2{ 
    border: 3px solid green; 
    margin: 40px; 
    text-align: center; 
} 

#left1{ 
    border: 1px solid green; float: left; margin-left: 30px; 
} 


#right1{ 
border: 1px solid red; float: right; margin-right: 30px; 
} 

#middle1{ 
border: 1px solid tan; margin: auto; width: 50px; 

} 

#middlerightbox{ 
border: 1px solid blue; margin: auto; width: 50px; 

} 




     <div id="box2"> 
     <div id="margin"> 
      <div id="left1"> 
       hello 
      </div> 

      <div id="right1"> 
       hello 
      </div> 

      <div id="middle1"> 
       hello 
      </div> 

      <div id="middlerightbox"> 
       hello 
      </div> 

     <div class="clear"> 
     </div> 
     </div> 

Answer 1

我覺得這種方式是你想要什麼：

#box2 { 
border: 3px solid green; 
margin: 40px; 
height: 20px; // necessary! 
text-align: center; 
} 

#left1 { 
border: 1px solid green; float: left; 
} 


#right1 { 
border: 1px solid red; float: left; 
} 

#middle1 { 
border: 1px solid tan; float: left; margin: auto; 
} 

#middlerightbox { 
border: 1px solid blue; float: left; margin: auto; 
} 

<div id="box2"> 
<div id="margin"> 
<div id="left1">hello</div> 
<div id="right1">hello</div> 
<div id="middle1">hello</div> 

<div id="middlerightbox">hello</div> 

<div class="clear"> </div> 
</div> 

必要時要求提供更多的幫助！