空格:正常内部空格:nowrap

Question

我想把空格:normal放在一个空格:nowrap的跨度里。当我在firefox中尝试上面的代码时，它起作用了。当我在chrome中尝试的时候不起作用。如何修复它？

<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的概念。

• 将css从html中分离出来。
• 对于容器，使用div。在创建多个DOM元素时，只需使用span来样式化内联elements.
• Don't滥用。

请看我的解决方案(除了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;
}