如何在CSS中自動設置段落寬度？

這是交易。我不想僅在我的段落中加下劃線，而是使用text-align，我想在下面添加一個虛線邊框，並將它居中在段落的父節點div內。這是我的代碼不起作用。（它增加了邊界在整個div而不只是段）如何在CSS中自動設置段落寬度？

p { 
    border-bottom:1px dotted; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
}

該段似乎正在父div的寬度。有沒有辦法將段落的寬度設置爲它包含的文本？（看來，margin:auto會如果可能的工作。）

來源

2013-06-18 user2020058

段落打算擴大其集裝箱的寬度。爲了使它不這樣做，你可以嘗試：

p { display: inline-block; }

撥弄例如：http://jsfiddle.net/HuFZL/1/

此外，您可能要包裹p標籤附加div，如果你需要他們清除其他段落/元素。

來源

2013-06-18 17:59:49 SlightlyCuban

正是我在找的，謝謝。 – user2020058

display：table更高效，並且不需要將它們作爲內聯框，然後將它們包裝到div中 –

我不知道有關display：table和size的問題。以前我一直針對IE7，所以我對它有點無知。謝謝！ – SlightlyCuban

嘗試增加寬度值的段落裏，否則該段將填補父容器的整個寬度和邊距值將不會做任何事情：

p { 
    border-bottom:1px dotted; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
    width: 100px; /* whatever width you want */ 
}

來源

2013-06-18 17:51:57

感謝您的答覆，但對於一個小段落，這將會使邊框長於文本。我正在尋找邊框的方式，只能跨越文本的寬度。 – user2020058

最大寬度值而不是指定寬度如何？你可以發佈你的所有代碼或製作小提琴嗎？ –

這就是我想....

<html> 

<style> 
{ 
border-bottom:1px dotted; 
margin-left:auto; 
margin-right:auto; 
text-align:center; 
} 

#custom 
{ 
width : 10px; 
} 

</style> 

<div id="custom"><p>dddd</p></div> 

</html>

來源

2013-06-18 17:53:54 psniffer

，如果你想段落保持堆疊在對方，並從他們成長的內容，你應該需要的是：

p { 
     display: table; 
     margin:auto; 
     border-bottom:1px dotted; 
}

來源

2013-06-18 18:11:34

沒有，保證金自動不會更改段落元素的大小。它只是試圖自動確定元素的自動尺寸邊上適當的邊距尺寸。基本上，如果您希望段落比包含它的div小，您可以將段落的靜態寬度設置爲特定寬度或父元素內部寬度的百分比。另一個選項，如果你不想做任何靜態大小的段落（S）將設置填充父元素或設置靜態頁邊距（S）。

div.paragraph-container { 
    padding: 20px; /* or padding: 20px 20px 20px 20px; sets all the padding individually (top, right, bottom, left) */ 
}

這將使格內的所有段落中心，是40像素較小假設段落沒有利潤。

div.paragraph-container p { 
    margin: 10px 20px; /* sets the margin on the paragraph(s) to 10px on top and bottom and 20px on left and right which does the same as the first example assuming that the div does not have padding. */ 
}

如果你想在邊境成爲完全文本的寬度則：

div.paragraph-container p { 
    border-bottom: 1px dotted black; 
    padding: 0px 0px 5px 0px; 
    margin: 10px 20px; 
} 

div.paragraph-container { 
    padding: 0px; 
}

假設文字填滿段落元素，那麼這將正常工作。如果你在段落中有兩個單詞，那麼它不會只與文本一樣寬。解決這個問題的唯一方法是使用內聯元素，例如跨度或已設置爲display: inline;的元素，但內聯元素將會並排混亂，除非在它們之間放置塊元素。

來源

2013-06-18 18:19:07 txpeaceofficer09

謝謝您添加語法高亮顯示，@Hemerson。現在我知道該怎麼做了。 – txpeaceofficer09

防彈方式

HTML

<div class="container"> 
<p><p> 
</div>

CSS

.container { text-align:center; } 
.container p { 
    display: table; 
    margin:0 auto; 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
}

來源

2014-02-17 14:16:48 comonitos

不會第二次顯示值覆蓋第一個？ – Izzy

如何在CSS中自動設置段落寬度？

回答

相關問題