html - 限制段落元素 CSS 的宽度

Question

我希望我的“.tag”div 只和其中的文本一样宽。但是，出于某种原因，段落元素跨越了父元素的整个宽度。我怎样才能阻止这种情况发生？这样“.tag”div 的宽度就和其中的文本一样宽？

JSFIDDLE:http://jsfiddle.net/X77e7/

我的 HTML:

<div class="tag">
    <p> Hiking </p>
</div>

我的 CSS:

.tag {
    margin: 0px 10px 0px 0px;
    padding: 5px 5px 5px 5px;
    height: auto;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 4px 4px 4px 4px;
    background-color: #f4f4f4;
}
.tag p {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #444;
}

Answer 1

添加display:inline-block

它现在正在拉伸(stretch)，因为 div 默认是占据整个空间的 block 元素。

.tag {
    margin: 0px 10px 0px 0px;
    padding: 5px 5px 5px 5px;
    height: auto;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 4px 4px 4px 4px;
    background-color: #f4f4f4; display:inline-block
}

DEMO