Question

我希望我的“.tag”div只能与其中的文本一样宽。但是，由于某种原因，段落元素跨越父元素的整个宽度。我怎么能阻止这种情况发生？那么“.tag”div只与它们里面的文字一样宽？

我的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

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

.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

Answer 2

div和p都是block元素。因此，您应该考虑在display设置inline。

.tag {
    display: inline;
    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 {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #444;
}

http://jsfiddle.net/X77e7/2/

Answer 3

仅float您的.tag并且您的问题已解决

.tag {
    float:left;
    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;
}

demo

限制段落元素CSS的宽度

3 个答案: