3

我希望我的“.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;
}
4

3 回答 3

4

添加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
}

演示

于 2013-03-06T07:27:05.667 回答
0

两者div都是p元素block。所以你应该考虑设置displayat 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/

于 2013-03-06T07:28:04.803 回答
0

只是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;
}

演示

于 2013-03-06T08:26:16.980 回答