如何把6個div放在同一行？

Question

我有這個問題試圖把6個div放在一行，每個div都被用作精靈。發生了什麼是2停留在包含div的頂部，其他4個在包含div之外。我已經研究過讓每個div浮動，其中包含寬度與div的寬度總大小相匹配的div。我還發現在另一個問題在第六個div後使用<br style="clear: left;" />，但仍在包含div，但這似乎並沒有解決我的問題。 這包含div是在頁腳div的內部。

CSS：

#footer { 
    width: 100%; 
    height: 135px; 
    background-color:#444;} 

#sprite { 
    margin: 0 auto; 
    width: 602px; 
    height: 35px; 
    /*background-image: url(images/sprite.png); 
    background-repeat: no-repeat; 
    background-position: left top;*/ 
} 


#ash { 
    width: 113px; 
    height: 35px; 
    float: left; 
    background: url(images/images/sprite1_01.png) no-repeat 0 0; 
} 

#ash:hover { 
    background-position:0 -35px; 

} 

#gateway { 
    margin: 0 auto; 
    width: 113px; 
    height: 35px; 
    background: url(images/images/sprite1_02.png) no-repeat 0 0; 
} 

#gateway:hover { 
    background-position:0 -35px; 

} 

#conect { 
    width: 113px; 
    height: 35px; 
    float: left; 
    background: url(images/images/sprite1_03.png) no-repeat 0 0; 
} 

#conect:hover { 
    background-position:0 -35px; 

} 

#peninsula { 
    width: 113px; 
    height: 35px; 
    float: left; 
    background: url(images/images/sprite1_04.png) no-repeat 0 0; 
} 

#peninsula:hover { 
    background-position:0 -35px; 

} 

#aza { 
    width: 75px; 
    height: 35px; 
    float: left; 
    background: url(images/images/sprite1_05.png) no-repeat 0 0; 
} 

#aza:hover { 
    background-position:0 -35px; 

} 

#greenscape { 
    width: 75px; 
    height: 35px; 
    float: left; 
    background: url(images/images/sprite1_06.png) no-repeat 0 0; 
} 

#greenscape:hover { 
    background-position:0 -35px; 

} 

HTML：

<div id="sprite"> 


      <div id="ash"> 

      </div> <!-- end of ash div--> 

      <div id="gateway"> 

      </div> <!--end of gateway --> 

      <div id="conect"> 

      </div> <!-- end of conect --> 

      <div id="peninsula"> 

      </div> <!-- end of peninsula --> 

      <div id="aza"> 

      </div> <!-- end of aza --> 

      <div id="greenscape"> 

      </div> <!-- end of greenscape --> 


     <br style="clear: left;" /> 


</div> <!-- end of sprite --> 

下面是一個圖片它是如何坐在瀏覽器。

Answer 1

你錯過了這一點。

#gateway { 
    float: left; 
}