white-space: normal inside white-space: nowrap

Question

Я хочу поместить список SPAN с пробелом: нормальный внутри пролета с белым пространством: nowrap. , когда я пытаюсь выполнить код выше в firefox works. , когда я пытаюсь использовать хром, не работает. как это исправить?

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

• Separe css из html.
• Для контейнеров используйте div. Используйте span только для стиля встроенных элементов.
• Не злоупотребляйте созданием многих элементов DOM.

Смотрите мое решение (вместо div вы можете использовать ul & li тоже). Также, если возможно, покажите изображение как a background-image вместо создания тега 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; 
}