并排定位整个元素

Question

我有一些里面有内容的DIV。我想并排显示它们，如果没有空格，我想打破整个div，所以内容不会单独换行。

我做了this example of what happens。

以下是上述链接的屏幕截图。

csspos http://img709.imageshack.us/img709/6799/csswo.png

这是预期的输出

cssposright http://img826.imageshack.us/img826/8530/csse.png

Answer 1

http://jsfiddle.net/qB225/15/怎么样？这增加了

.item {
    ...
    white-space: nowrap;
}

Answer 2

在链接和跨度之间放置不间断的空间。

http://jsfiddle.net/qB225/22/

Answer 3

http://jsfiddle.net/qB225/21/

.master
{
    width: 160px;
}

.item
{
    display:inline-block;
    font-size: 11px;
    padding: 2px 2px 2px 0;
}

.item { display:inline; } /* DO NOT REMOVE, FOR IE */

.item a
{
    text-transform: uppercase;
}
​

Answer 4

如果你想让它们只成对包装你需要做两件事。首先更改您的html，以便将项目div分成两组：

<div class="master">
    <div>
        <div class="item">
            <a href="javascript:;">Text</a>
            <span>(10)</span>
        </div>
        <div class="item">
            <a href="javascript:;">Text</a>
            <span>(10)</span>
        </div>
    </div>
    <div>
        <div class="item">
            <a href="javascript:;">Text</a>
            <span>(10)</span>
        </div>
        <div class="item">
            <a href="javascript:;">Text</a>
            <span>(10)</span>
        </div>
    </div>
</div>

然后在分组div中添加一个浮点数：

.master > div{ float:left; }

Answer 5

尝试使用“inline-block”，如下所示：

.item
{
  display: inline-block;
  font-size: 11px;
  padding: 2px 2px 2px 0;
}

感谢。