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＆amp; amp;的概念。的CSS。

来自html的Separe css。
对于容器，请使用div。仅使用span设置内联元素的样式。
不要滥用创建许多DOM元素。

请参阅我的解决方案（而不是div，您也可以使用ul＆amp; 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;
}

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

1 个答案: