html - 如何向导航菜单中的链接添加符号？

Question

这是我的作业题:

Add the symbols to the links. To do that, use the background-image, background- repeat, and background-position properties as shown in figure 5-11. The symbol is in the images file, and it is named right.jpg. In this case, you don’t want to repeat the image, and you want to position it in the middle vertically and about 95% from the left.

我的导航菜单应该看起来完全像这样:

但它最终看起来更像这样:

这是我的代码:

<h2>Guest speakers</h2>
    <nav id="nav_list">
        <ul>
            <li> <h3> <a href="c06x_toobin.html">October<br>Jeffrey Toobin</a></h3></li>
                <li> <h3> <a href="#">November<br>Andrew Ross Sorkin</a></h3></li>
                <li> <h3> <a href="#">January<br>Amy Chua</a></h3></li>
                <li> <h3> <a href="c07x_toobin.html">February<br>Scott Sampson</a></h3></li>
        </ul>
                <h3> <a href="../index.html">Return to Home page</a></h3>
    </nav>

#nav_list ul { 
list-style: none;
margin-left: 1.25em;
margin-bottom: 1.5em;
background-image: url("images/right.jpg");
background-repeat:  no-repeat;
background-position: 95%;
}
#nav_list ul li { 
width: 200px;
margin-bottom: .5em;
border: 2px solid black; 
border-radius: 10px;
box-shadow: 2px 2px 2px 2px  #800000;
color:blue;
}
#nav_list ul li a {
display: block;
font-weight: bold;
color: blue;
text-decoration: none;
padding: .5em 0 .5em 1.5em; 
color: black;
}

如何让它看起来和图片一模一样？如果有任何帮助，我将不胜感激。

Answer 1

背景图片应该在 li 元素上，而不是在父元素 ul 上。

此外，您可以在同一属性中通过 X 轴和 Y 轴定位背景图像。

#nav_list ul { 
  list-style: none;
  margin-left: 1.25em;
  margin-bottom: 1.5em;
}
#nav_list ul li { 
  width: 200px;
  margin-bottom: .5em;
  border: 2px solid black; 
  border-radius: 10px;
  box-shadow: 2px 2px 2px 2px  #800000;
  color:blue;
  background-image: url("images/right.jpg");
  background-repeat:  no-repeat;
  background-position: 95% 50%;
}
#nav_list ul li a {
  display: block;
  font-weight: bold;
  color: blue;
  text-decoration: none;
  padding: .5em 0 .5em 1.5em; 
  color: black;
}