html - 使绝对位置的 block 成为其文本内容的宽度

Question

我知道我们可以用不同的方式使 div 的宽度等于它的内容:

应用以下之一:

- display:inline-block
- float:left
- position:absolute

但出于某种原因，我无法强制我的 div 根据它的文本内容增长，它只是在空间存在时尽快调整到可能的最短宽度，或者换句话说，div 中最大的单词将确定元素的 witdh。

我真的希望一切都在一行中。

这是我的 fiddle :http://jsfiddle.net/cBL62/1/

感谢您的帮助，这让我发疯。

Answer 1

将white-space:nowrap添加到.zone_title:

.zone_title {
    background: none repeat scroll 0 0 #1cd9af;
    bottom: 0;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    left: 100%;
    padding: 6px 15px;
    position: absolute;
    text-align: center;
    white-space:nowrap;
}

jsFiddle example