html - 宽度 :auto floating divs problem (IE6)

Question

我需要将这些 float div 中的文本排成一行。在 Firefox 中这工作正常。在 IE6 中它看起来很乱:

screen

我无法在这些上设置明确的宽度。设置高度没有帮助。有什么想法吗？

HTML:

<div id="wraper">

<div class="draggable">
    <p>a main road with fast-travelling traffic</p>
</div>

<div class="draggable">
    <p>a very large bird, not able to fly</p>
</div>

<div class="draggable">
    <p>very important</p>
</div>

<div class="draggable">
    <p>a plant with white berries that feeds on trees</p>
</div>

<div class="draggable">
    <p>breakfast and lunch combined in one meal</p>
</div>

<div class="draggable">
    <p>a part of a room used for cooking</p>
</div>

和CSS:

#wraper{
background: #FAFAFA;
border: 1px solid #333;
margin: 0 auto;
overflow: hidden;
padding: 20px;
width: 500px;
}
.draggable{
background: #F1F7FF;
border: 1px solid #CAE1FF;
display: inline;
float: left;
margin: 0 5px 5px 0;
padding: 3px;
position: relative;
width: auto;
height: auto;
}
.draggable p{
margin: 0;
padding: 0;
}

Answer 1

.draggable p {
    white-space: nowrap;
}

您不需要明确的auto 宽度/高度，这是默认值。您通常不会使用 display: inline，因为 float 永远不会内联，但我想这是 IE 错误的解决方法？