css - 分隔符只在文字鏈接而不是圖像

正確的是文字鏈接和圖像鏈接。每個鏈接都有一個分隔符。我只希望文字鏈接顯示分隔符而不是圖片鏈接。css - 分隔符只在文字鏈接而不是圖像

目前：文本>圖像>圖像>圖像>

期望：文本>圖片圖片圖片

感謝

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 

    <style type="text/css"> 
#footer 
{ 
    height:30px; 
    line-height:30px; 
    border:solid 1px #E5E5E5; 
} 

#footer li 
{ 
    list-style-type:none; 
    float:left; 
    padding-left:10px; 
} 

#footer a 
{ 
    height:30px; 
    display:block; 
    background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png'); 
    background-repeat:no-repeat; 
    background-position:right; 
    padding-right: 15px; 
    text-decoration: none; 
    color:#0088CC; 
} 

ul 
{ 
    list-style-type:none; 
    padding:0px; 
    margin:0px; 
} 

    </style> 
    <script></script> 
</head> 
<body background-color: #000000;> 




<!-- Footer --> 
<div style="width=980px;"> 
    <ul id="footer"> 
     <li id="text_separator"><a href="http://www.stackoverflow.org">Text</a></li> 
     <li><a href="http://www.stackoverflow.org/about"><img src="1.png" width="35" height="30" border=1></a></li> 
     <li><a href="http://www.stackoverflow.org/about"><img src="1.png" width="35" height="30" border=1></a></li> 
     <li><a href="http://www.stackoverflow.org/about"><img src="1.png" width="35" height="30" border=1></a></li> 
     <li><a href="http://www.stackoverflow.org/about"><img src="1.png" width="35" height="30" border=1></a></li> 
    </ul> 
</div> 


</body> 
</html>

來源

2013-10-31 Lacer

我建議你修改

#footer a爲#footer li:nth-child(1)

這裏是JSFIDDLE

更新：保持#footer a並添加#footer li:nth-child(1)

#footer a{ 
    text-decoration:none; 
    color:#0088CC; 
} 
#footer li:nth-child(1) 
{ 
    height:30px; 
    display:block; 
    background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png'); 
    background-repeat:no-repeat; 
    background-position:right; 
    padding-right: 15px; 
}

updated fiddle

來源

2013-10-31 01:24:33 xnome

給這個項目你想有一個類：

<li id="text_separator"><a class="separator" href="http://www.stackoverflow.org">Text</a></li>

並分配它的CSS：

#footer .separator { 
    background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png'); 
    background-repeat:no-repeat; 
    background-position:right; 
}

從正常的#footer a CSS中刪除相同的分配。

Here is a jsFiddle of it looking as you wish.

來源

2013-10-31 00:58:29 PlantTheIdea

我建議你獨立你的CSS是這樣的：

#footer a 
{ 
    height:30px; 
    display:block; 
    padding-right: 15px; 
    text-decoration: none; 
    color:#0088CC; 
} 

#footer li.text_separator a { 
    background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png'); 
    background-repeat:no-repeat; 
    background-position:right; 
}

並且還通過一類改變ID 「text_separator」：

<li class="text_separator"><a href="http://www.stackoverflow.org">Text</a></li>

這樣，你就可以將這個CSS類應用於其他列表元素。 Id是爲了獨特的元素。

來源

2013-10-31 01:02:56 tomahim

css - 分隔符只在文字鏈接而不是圖像

回答

相關問題