限制段落元素的寬度CSS

我希望我的「.tag」div只與其中的文本一樣寬。但是，由於某種原因，段落元素跨越父元素的整個寬度。我怎樣才能阻止這種情況發生？所以「.tag」div只和它們裏面的文字一樣寬？限制段落元素的寬度CSS

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

來源

2013-03-06 user2096890

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

來源

2013-03-06 07:27:05 Sowmya

非常感謝你。我加了float：留給它，並且做了同樣的事情！ – user2096890 2013-03-06 07:28:02

當您在多個位置使用相同的div時，float可能會影響div的對齊方式。我會建議顯示 – Sowmya 2013-03-06 07:31:41

兩個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/

來源

2013-03-06 07:28:04 TimPetricola

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

來源

2013-03-06 08:26:16 jhunlio

限制段落元素的寬度CSS

回答

相關問題