html - 空白：正常内部空白：nowrap

Question

我想将带有空白的 SPAN 列表：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

You are missing some concepts about html & css.

• Separe css from html.
• For containers, use div. Use span just to style inline elements.
• Don't abuse on creating to many DOM elements.

See my solution (instead of div you can use ul & li too). Also, if possible, show the image as a background-image instead creating a img tag and applying absolute positioning.

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;
}