力內部元素溢出-X

我的結構：力內部元素溢出-X

#navBar { 
    height: 55px; 
    width: 40px; 
    overflow-x:scroll; 
    overflow-y:hidden; 
} 

<div id="navBar"> 
akdhbaIDBhbfbhwhfbaibf 
    <div style="width: 80; float: left; text-align: center;"> 
    <img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav1" /> 
    <br /> 
    <span style="font-size: 80%">Nav1</span> 
    </div> 
    <div style=" width: 80; float: left; text-align: center;"> 
    <img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav2" /> 
    <br /> 
    <span style="font-size: 80%">Nav2</span> 
    </div> 
    <div style=" width: 80; float: left; text-align: center;"> 
    <img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav3" /> 
    <br /> 
    <span style="font-size: 80%">Nav3</span> 
    </div> 
</div>

我想，所有的內div S的將scroll-x和不斷行。我怎樣才能做到這一點？

來源

2012-07-21 the_farmer

你到底想要什麼？ – banzomaikaka 2012-07-21 06:42:10

嗨，我需要所有的內部div將在一行。 – 2012-07-21 06:49:32

這將工作：

<style type="text/css"> 
    #navBar { 
     height: 55px; 
     width: 80px; 
     overflow-x: scroll; 
     overflow-y:hidden; 
     white-space: nowrap; 
    } 

    #navBar div { 
     display: inline-block; 
    } 
</style>

和HTML部分：

<div id="navBar"> 
     akdhbaIDBhbfbhwhfbaibf 
     <div style="width: 100px; text-align: center; background-color: red;"> 
      <img src="" alt="Nav1" /> 
      <br /> 
      <span style="font-size: 80%">Nav1</span> 
     </div> 
     <div style=" width: 100px; text-align: center;"> 
      <img src="" alt="Nav2" /> 
      <br /> 
      <span style="font-size: 80%">Nav2</span> 
     </div> 
     <div style=" width: 100px; text-align: center; background-color: red;"> 
      <img src="" alt="Nav3" /> 
      <br /> 
      <span style="font-size: 80%">Nav3</span> 
     </div> 
</div>

無需float: left; CSS。

來源

2012-07-21 07:12:16

感謝穆罕默德，它正在網頁上工作。你有什麼想法，當我從手機打開網頁時它不工作？謝謝。 – 2012-07-21 09:54:01

很可能手機瀏覽器不支持'white-space：nowrap;'CSS屬性。 – 2012-07-21 09:58:53

你知道我能在這裏改變什麼，所以它可以在移動設備上工作嗎？ – 2012-07-21 10:06:54