0

我有导航 div，有按钮，例如只有 img 而不是链接，我想在 ant 之前，在此图像之后添加行：我尝试：

#nav{                   
    height: 50px;
    width: auto;
    margin: 0 auto;
    margin-top: 30px;
    padding: 0;}

#nav ul li img{
    padding: 0; margin: 0;}

html:

<li><img src="./img/dot.gif" alt=""/></li>

我将这些代码添加到 css 以添加 after 和 bofore 图像行：

#nav ul li img:before{
  background: url('./img/orange-pixel.gif') repeat-x 50% 50%; 
  width: 40px; 
  height: 3px; 
  float: left; 
  padding-top: 45px;} 
#nav ul li img:after{
  background: url('./img/orange-pixel.gif') repeat-x 50% 50%; 
  width: 40px; 
  height: 3px; 
  float: left; 
  padding-top: 45px;}

但不显示线条。

4

2 回答 2

3

根据这篇文章，大多数浏览器不会为标签计算:before/ 。无论如何，为了帮助你：你为什么不通过为图像添加边框来设置线条。或者在标签上使用/ ？:afterimg:before:afterli

于 2012-11-27T14:32:56.263 回答
1

你可以加

content:".";
text-indent:-9999em;
display:block

到你的：之前和：之后。所有这一切都是给它一些“抓住”的东西，它应该可以工作。

如果它们是基本线条，为什么不在 li 的一侧添加边框？:before 和 :after 在旧版浏览器中不起作用，因此如果有必要，它会提供更一致的体验。

于 2012-11-27T14:46:36.447 回答