Question

我正在为一个类的项目工作，它要求创建一个这样的导航栏：

enter image description here

每个div之间有20px填充，20px用于填充它周围的框等。

我在链接中添加了小箭头图像，我的代码在下面，我得到了箭头的.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);
}

ADDED JSFiddle CODE LINK：http://jsfiddle.net/502j2qqn/

Answer 1

使用时遇到的最大问题是：它不像使用传统背景那样兼容浏览器。您的代码将起作用：在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;
}

Answer 2

嗨，请查看以下链接，我们可以使用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：

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

在CSS中链接的末尾添加图像

2 个答案: