白色空間：正常白色空間內：nowrap

Question

我想把白色空間的SPAN列表：正常白色空間：nowrap的範圍內。 當我嘗試在Firefox上面的代碼工作。 當我嘗試在鉻不起作用。 如何解決它？

<div style="overflow: auto; width: 100%; white-space: nowrap;" class="well"> 

      <span style="margin: 10px; position: relative;"> 
       <img data-src="holder.js/150x150" class="img-rounded img-polaroid" alt="150x150" style="width: 150px; height: 150px;"> 
       <a href="/promo-web/promocao/13"> 
        <span style="position: absolute; left: 5px;white-space:normal">alienígenas de são cristovão e o melhor do sorvete</span> 
       </a> 


      </span> 

      <span style="margin: 10px; position: relative;"> 
       <img data-src="holder.js/150x150" class="img-rounded img-polaroid" alt="150x150" style="width: 150px; height: 150px;"> 
       <a href="/promo-web/promocao/13"> 
        <span style="position: absolute; left: 5px;white-space:normal">alienígenas de são cristovão e o melhor do sorvete</span> 
       </a> 


      </span> 

      <span style="margin: 10px; position: relative;"> 
       <img data-src="holder.js/150x150" class="img-rounded img-polaroid" alt="150x150" style="width: 150px; height: 150px;"> 
       <a href="/promo-web/promocao/13"> 
        <span style="position: absolute; left: 5px;white-space:normal">alienígenas de são cristovão e o melhor do sorvete</span> 
       </a> 


      </span> 
... 

Answer 1

您錯過了一些有關html & css的概念。

• 從html中separe css。
• 對於集裝箱，請使用div。使用span只是爲了內聯元素的樣式。
• 不要濫用創建許多DOM元素。

見我的解決方案（而不是div可以使用ul & li太）。 此外，如果可能的話，將圖像顯示爲a背景圖像，而不是創建img標記並應用絕對定位。

http://jsfiddle.net/jvHZq/

HTML：

<div class="well"> 
    <div> 
     <img data-src="holder.js/150x150" class="img-rounded img-polaroid" /> 
     <a href="/promo-web/promocao/13">alienígenas de são cristovão e o melhor do sorvete</a> 
    </div> 
    <div> 
     <img data-src="holder.js/150x150" class="img-rounded img-polaroid" /> 
     <a href="/promo-web/promocao/13">alienígenas de são cristovão e o melhor do sorvete</a> 
    </div> 
    <div> 
     <img data-src="holder.js/150x150" class="img-rounded img-polaroid" /> 
     <a href="/promo-web/promocao/13">alienígenas de são cristovão e o melhor do sorvete</a> 
    </div> 
</div> 

CSS：

.well { 
    overflow: auto; 
    width: 100%; 
    white-space: nowrap; 
} 
.well > div { 
    float: left; 
    position: relative; 
    white-space:normal; 
    width: 33%; 
} 
img { 
    width: 150px; height: 150px; 
} 
a { 
    position: absolute; 
    top: 0; 
    left: 5px; 
}