CSS - Div「background-text」instead of background-image

我希望我的div盒在div框的右邊緣有一個「raquo」（»）位置，但不是超鏈接的一部分。CSS - Div「background-text」instead of background-image

我的DIV框是一個超鏈接，這裏是我的CSS

.episode-nav .alignright a { 
    margin-bottom:7px; 
    margin-top:7px; 
    width:274px; 
    padding:5px 0px; 
    background:#2A2A2A; 
    text-align:center; 
    border:1px solid #1B1B1B; 
    float:right; 
}

可以做些什麼？

來源

2010-08-23 GreatestSwordsman

如何使用一個列表，而不是一個div的。這是菜單的權利？ – 2010-08-23 08:08:39

您的HTML和CSS代碼的實例可以幫助我們更好地幫助您。 :) – Kyle 2010-08-23 08:14:36

如果您正試圖創建一個菜單，你應該使用正確的標記是一個列表，像這樣

<ul id="menu"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
</ul>

現在，真正得到了»工作。有兩種方法可以做到這一點。您可以在其中添加span，其中包含一個»，並將其放置在錨點或列表中，也可以使用CSS元素爲您生成內容。請注意，第二種方法的瀏覽器支持較少，可能會引起爭議。看一看在:after僞元素在這裏：http://reference.sitepoint.com/css/pseudoelement-after

看看在這裏的行動兩種方法的演示：http://jsfiddle.net/aQSVp/

注意如何使用content屬性來生成內容。

#after a:after { 
    content: '»'; 
    float: right; 
    margin-right: 10px; 
}

來源

2010-08-23 09:04:00

舊版瀏覽器不支持。 – 2010-08-23 22:18:42

@Frank - 不，這就是我提供替代品的原因。 '：after'方法可能更乾淨，因爲與'span'方法不同，創建的元素不會被注入到DOM中。 – 2010-08-24 06:05:36

嗯，你是對的，這只是我在IE6上仍然有5到7.5％的用戶，這就是我推薦背景圖片的原因。 – 2010-08-25 09:13:02

我不是100％確定我明白你想要'背景文本'。如果你只是想在前面加上一個「>>」，你爲什麼不在你的div裏面做這個？

<span>&raquo;<a href="...">This is a link</a></span>

可能將「white-space：nowrap」添加到跨度風格。

來源

2010-08-23 08:28:55

讓自己有點raquo光柵圖像，並將其用作背景圖像。

來源

2010-08-23 22:17:37

我知道這是一個老問題，已經有了答案，但是這個問題有一個CSS解決方案。

在li上使用:before，可能有一個»使用它的十六進制代碼\BB。 Demo here.

HTML：

<ul> 
    <li>List element 1</li> 
    <li>List element 2</li> 
    <li>List element 3</li> 
    <li>List element 4</li> 
</ul>

CSS：

ul 
{ 
    list-style: none; 
} 

li:before 
{ 
    content: '\BB '; 
}

來源

2011-07-22 20:39:34 Bojangles

CSS - Div「background-text」instead of background-image

回答

相關問題