我有一個非常特定的CSS問題。我試圖讓每段文字都有一個邊框底部:1px,同時避免編寫多餘的標記。風格文本裝飾不同或在每一行上都有邊框
顯然p {border-bottom:1px dotted #000;}
不起作用,因爲它只會在p標記的最後一行設置邊框底部。另一方面,文字修飾給出了正確的下劃線,但不能用虛線點綴。
所以基本上我想知道是否有更好的方法來做這件事,而不是找出什麼時候有一條新線,然後添加跨度,然後使用邊框底部的樣式,並最終得到嚴重雜亂的標記。
我有一個非常特定的CSS問題。我試圖讓每段文字都有一個邊框底部:1px,同時避免編寫多餘的標記。風格文本裝飾不同或在每一行上都有邊框
顯然p {border-bottom:1px dotted #000;}
不起作用,因爲它只會在p標記的最後一行設置邊框底部。另一方面,文字修飾給出了正確的下劃線,但不能用虛線點綴。
所以基本上我想知道是否有更好的方法來做這件事,而不是找出什麼時候有一條新線,然後添加跨度,然後使用邊框底部的樣式,並最終得到嚴重雜亂的標記。
您可以嘗試製作模擬虛線的背景,然後在段落中使用該背景。只要確保它的高度與段落的line-height
屬性具有相同的值,以便它適當地匹配行。例如,如果你想讓你的線條成爲1px空間的3px短劃線,那麼你可以製作一個寬4px的X像素高圖像(其中X當然是文本行的高度),並且只是重複一遍。
希望這會有所幫助。
由於border-bottom只適用於由其選擇器標識的元素,因此除了將每個<p>
與<span>
標籤(或其他)的內容包裝在一起之外,我看不到另一種方法。你可以通過靶向span標籤所有p標籤內立即避免惱人的毛刺:
p > span:first-child {border-bottom:1px dotted #000;}
<p><span>this is a paragraph with a first-child span and a dotted underline<span></p>
<p>this is a paragraph with no first-child span <b>this is bold</b> <span>and this span is ignored<span></p>
是啊,我想早就該選項,但隨後很快就意識到,在所有瀏覽器的控制不夠具體。在線高度偏移0.2px就足以讓它錯位。雖然好想法。 – Jonas 2010-12-03 13:09:59