白色空间：正常白色空间内：nowrap

我想把白色空间的SPAN列表：正常白色空间：nowrap的范围内。当我尝试在Firefox上面的代码工作。当我尝试在铬不起作用。如何解决它？白色空间：正常白色空间内：nowrap

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

来源

2013-08-30 RJuliao

1.你不应该使用内联样式。使用CSS。 2. Chrome在Chrome中无法正常工作？ 3.请将您的相关代码上传到http://www.jsfiddle.net并将链接提供给我们，以便我们查看它。 – Itay

您错过了一些有关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; 
}

来源

2013-08-30 20:23:12

白色空间：正常白色空间内：nowrap

回答

相关问题