大約有文字邊框包裹

假設我有它大約有文字邊框包裹

<div id='page' style='width: 600px'> 
    <h1 style='border:2px black solid; font-size:42px;'>Title</h1> 
</div>

的標題會延長整個頁面的所有600個像素的邊界，但我想要的單詞「標題」緊密配合一些文字DIV內。但是，我並不知道這個單詞有多少像素寬，所以我不能將「標題」放在一個div中並明確地設置它的寬度。

是否有一種簡單的方法可以使邊框適合圍繞沒有完全水平延伸的區域的文字？

來源

2011-01-14 Steven Lu

這是因爲h1是一個塊元素，所以它會延長線（或你給的寬度）。

您可以通過在H1設置display:inline使邊境去大約只有文字

例子：http://jsfiddle.net/jonathon/XGRwy/1/

來源

2011-01-14 09:14:43

不確定，如果這就是你想要的，但你可以讓內部div爲內聯元素。這樣邊框應該只包裹在文字周圍。甚至比這更好的是爲你的標題使用內聯元素。

溶液1

<div id="page" style="width: 600px;"> 
    <div id="title" style="display: inline; border...">Title</div> 
</div>

溶液2

<div id="page" style="width: 600px;"> 
    <span id="title" style="border...">Title</span> 
</div>

編輯：奇怪，於是不能正確解釋我的代碼的例子爲塊，所以不得不使用直列碼方法。

來源

2011-01-14 09:13:52

出於某種原因，降價拒絕格式化嵌套的列表內的代碼塊（或者`ul`或`ol`）。 – 2011-01-14 12:03:26

試試這個，看看你得到你的目標爲：

<div id='page' style='width: 600px'> <h1 style='border:2px black solid; font-size:42px; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;'>Title</h1> </div>

來源

2015-06-24 23:13:33

嘗試將其放入跨度元素中：

<div id='page' style='width: 600px'> 
 
    <h1><span style='border:2px black solid; font-size:42px;'>Title</span></h1> 
 
</div>

來源

2016-02-18 20:36:03 shlgug

大約有文字邊框包裹

回答

相關問題