在链接的CSS

我对A类项目的工作结束时添加图像，并要求做一个导航条是这样的：每个DIV，20像素之间在链接的CSS

enter image description here

20像素填充为填充周围的盒子等。

我在添加链接后的文本中的小箭头图像时出现问题，我的代码位于下方，我获得了箭头的.png文件，在添加箭头之前没问题，但是一旦我将箭头添加到a：在此页面底部的代码行之后，它会使所有内容变形：

我该如何解决这个问题？

HTML：

<div id="left"> 
      <h2>Pick a Platform!</h2> 
      <ul> 
       <li><a class="green" href="#">Steam</a></li> 
       <li><a class="orange" href="#">iPad</a></li> 
       <li><a class="green" href="#">XBox One</a></li> 
       <li><a class="orange" href="#">PlayStation 4</a></li> 
       <li><a class="lastChild" href="#">Wii U</a></li> 
      </ul> 
    </div>

CSS：

#left ul { 
    padding-bottom: 20px; 
} 

#left ul .orange { 
    background-color: #DC9B25; 
} 

#left ul .green { 
    background-color: #657761; 
} 

#left ul li { 
    list-style-type: none; 
    margin-right: 20px; 
    margin-left: -20px; 
} 

#left ul li a { 
    font-size: 20px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    padding-left: 20px; 
} 

#left ul li a.lastChild { 
    border-bottom: transparent; 
    background-color: #657761; 
}

我研究了一下，发现这是你用什么将图像添加到链接的末尾：

#left ul li a:after { 
    content: url(arrow.png); 
}

加入JSFiddle代码链接：http://jsfiddle.net/502j2qqn/

来源

2014-10-06 originalwill

给我们的jsfiddle代码... – Grasper 2014-10-06 15:35:21

@Grasper，为什么呢？ StackOverflow现在内置了该功能。给我们一个可运行的代码片段！ :) – GolezTrol 2014-10-06 15:37:06

@Grasper对不起，我新 – originalwill 2014-10-06 15:41:38

使用的最大问题：之后是它不像使用传统背景那样跨浏览器兼容。你的代码可以工作，在Pseudo元素之后，只需要适当地设置风格，但是你也可以使用它添加更多的元素到DOM中，这会增加加载时间，而且实际上只是不必要的。

改变该选择什么，我有以下和CSS删除#left ul li a:after选择

#left ul li a { 
    font-size: 20px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    padding-left: 20px; 
    background: url('http://i.imgur.com/ERt02Jx.png') no-repeat center right; 
}

来源

2014-10-06 15:41:24 Bradley

这绝对是要走的路，但作为一个答案，您可能想要解释*为什么这应该被用来代替仅仅定位'：after'生成的内容。 – 2014-10-06 15:43:02

谢谢！完美工作 – originalwill 2014-10-06 15:43:02

@JamesDonnelly我明白代码是如何工作的，但我想知道为什么它不起作用。 – originalwill 2014-10-06 15:43:42

喜请认准以下链接的答案，我们可以克里特箭头使用CSS本身

http://jsfiddle.net/jai17/u8v6gr6a/

CSS：

.arrow-right { 
    border-bottom: 5px solid rgba(0, 0, 0, 0); 
    border-left: 10px solid #ffffff; 
    border-top: 5px solid rgba(0, 0, 0, 0); 
    float: right; 
    height: 0; 
    margin-right: 20px; 
    margin-top: 7px; 
    width: 0; 
}

HTML：

来源

2014-10-06 16:03:04 Jaishankar

在链接的CSS

回答

相关问题