使用CSS最小化邊框文字的邊框

有色邊框包圍接壤文本
接壤文本的邊框最小包圍文本
接壤的文本有最大寬度
接壤文字的邊框不重疊相鄰元素

在呈現時，它應該看起來像這樣：

alt text http://i29.tinypic.com/e026v4.png

對於我使用的邊界：

padding: 1.0em; 
border-style: solid; 
border-width: 2px; 
background-color: #FFFFCC; 
border-color:#E8E800;

如果我申請的CSS到，那麼邊框的寬度與瀏覽器窗口。我希望邊框只與文字一樣寬（根據文字大小而變化），因此使用width設置絕對寬度不起作用。我試過display:inline但是那個causes spacing issues with neighboring elements。我也嘗試將上面的CSS應用到中包含的，但是當文本太長並且換行時這不起作用。

alt text http://i25.tinypic.com/11jaxw5.png

來源

2009-09-03 Steve Kuo

您是否嘗試過使用名爲float的CSS屬性進行試驗？指定float：left會導致包含元素的寬度根據文本調整 - 看起來像是一種次要效果，但它起作用。

如果您不希望包含的元素排列起來， ~~您可以添加 標籤或~~ 您可以添加「clear：both;」風格。

我絕對認爲它是可以實現的 - 你只需要找到屬性/值的正確組合。

來源

2009-09-03 18:53:11 Mayo

如果你走這條路線，你可以添加clearfix來避免額外的標記。（http://www.positioniseverything.net/easyclearing.html） – easement 2009-09-03 19:01:40

注意：'
'標記不會阻止排列元素，除非您將一些基本的CSS應用於它們：'br {clear：left; }' – brianreavis 2009-09-03 19:01:55

我只是抓出標籤參考 - 問題是關於css無論如何:) – Mayo 2009-09-03 19:10:38

聽起來像一個表給我...哦，我可以看到評論和向下票來了。「表格僅用於表格數據」...是的，我知道，但他們也是一個完成史蒂夫想要做的事情的方式。

來源

2009-09-03 18:41:53 Badfish

通過將高亮顯示的段落作爲塊元素向左浮動（缺省爲），您可以獲得突出顯示的段落以最小限度地圍繞文本。然後，將段落設置爲clear:left以防止它們水平堆疊。

的CSS：

.pars { 
    /* this is used to prevent the last floating element 
    from causing issues below the paragraph (.pars) container */ 
    width: 100%; 
    overflow: visible; 
} 
.pars p { 
    clear: left; 
    margin: 0 0 0.5em 0; 
} 
.pars .highlighted { 
    float: left; 
    padding: 1.0em; 
    border-style: solid; 
    border-width: 2px; 
    background-color: #FFFFCC; 
    border-color:#E8E800; 
}

你的HTML：

<div class="pars"> 
    <p>Some paragraph text</p> 
    <p class="highlighted">Some bordered text</p> 
    <p class="highlighted">Some more bordered text</p> 
    <p>Some very long bordered text blah blah blah 
    blah blah blah blah blah blah blah blah blah blah</p> 
</div>

來源

2009-09-03 18:53:48 brianreavis

怎麼樣顯示：inline-block的？

來源

2009-09-03 18:54:47 easement

IE6 /跨瀏覽器的內聯塊的東西：http://foohack.com/2007/11/cross-browser-support-對於內聯 - 嵌段 - 定型/ – easement 2009-09-03 18:56:51

只需添加

p.highlighted { 
    float: left; 
} 

p { 
    clear: both; 
}

這將導致高亮段落，只需要通過自己的文本，並確保現有的段落從不與標明的水平重疊一樣寬。

來源

2009-09-03 19:00:25

使用CSS最小化邊框文字的邊框

回答

相關問題