Question

我无法正确地将图片放在标题栏的链接列表后面。我尝试调整左侧位置但仍然失败。我想找到一个供大家使用的解决方案。谢谢！

这是我所说的一个例子。 MBACK校正

以下代码：

   <div class="header">
        <div id="menu">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about_us.html">About Us</a></li>
            <li><a href="reviews.html">Reviews</a></li>
            <li><a href="kids_art.html">Kids' Art</a></li>
           (For Example) <li><img alt="" id="mback"3 src="images/fish.png"><a href="contact_the_fish.html">Contact The Fish</a></li>
          </ul>
        </div>
      </div>

CSS：

/*Menu Style (Same All Through)*/
#menu ul{
  list-style-type:none; 
}
#menu li{
  display:inline;
  font-family: 'Alef', sans-serif;
  font-size: 30px;
  padding-right:22px;
}
#menu{
  text-align:center;
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}

/*Fish Position*/
/*Index Page*/
#mback{
  z-index: -1;
  height:75px;
  width:140px;
  position: absolute;
  top:0;
  left:0;
}
/*About Us*/
#mback2{
  z-index: -1;
  height:75px;
  width:150px;
  position: absolute;
  top:0;
  left:0;
}
/*Contact The Fish*/
#mback3{
  z-index: -1;
  height:75px;
  width:140px;
  position: absolute;
  top:0;
  left:0;
}
/*Reviews*/
#mback4{
  z-index: -1;
  height:75px;
  width:140px;
  position: absolute;
  top:0;
  left:0;
}
/*Kids Art*/
#mback5{
  z-index: -1;
  height:75px;
  width:140px;
  position: absolute;
  top:0;
  left:0;
}

Answer 1

将鱼图像作为背景图像并将文本放在上面

#menu li {
    background: url(images/fish.png) no-repeat;
    font-size: 30px;
    etc...
}

请参阅此帖子：using background image for li

Answer 2

这样的东西？

jsFiddle demo here

<强> CSS

#menu ul{
   list-style-type:none; 
}
#menu li{
     display:inline;
     font-family: 'Alef', sans-serif;
     font-size: 20px;
     padding:38px;
}
#menu{
     text-align:center;
     position: absolute;
     top:0;
     left:0;
}  
.active {
     background: url('http://thefishonthedome.com/images/fish.png') -6px 20px / 130px 64px no-repeat;
}

请注意课程.active

的用法

  <ul>
    <li class="active"><a href="index.html">Home</a></li>
    <li><a href="about_us.html">About Us</a></li>
    <li><a href="reviews.html">Reviews</a></li>
    <li><a href="kids_art.html">Kids' Art</a></li>
    <li><a href="contact_the_fish.html">Contact</a></li>
  </ul>

想在列表中添加链接后面的图像

2 个答案: