Question

我需要一个跨浏览器的解决方案，让列表项菜单链接到图像。我正在使用默认的ASP.NET MVC 4模板，我有以下生成的HTML：

<ul id="menu">
  <li>
    <a href="/Home/Item01">
      <img src='/Images/MenuItem01.gif'/>
      Menu Item 01
    </a>
  </li>

  <li>
    <a href="/Home/Item02">
      <img src='/Images/MenuItem02.gif'/>
      Menu Item 02
    </a>
  </li>

  <li>
    <a href="/Home/Item03">
      <img src='/Images/MenuItem03.gif'/>
      Menu Item 03
    </a>
  </li>

</ul>

CSS：

ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: left;
}

ul#menu li {
    display: inline;
    list-style: none;
    padding-left: 15px;
}

ul#menu li a {
    background: none;
    color: #999;
    text-decoration: none;
}

ul#menu li a:hover {
    color: #333;
    text-decoration: none;
}

这是一个小提琴：http://jsfiddle.net/EY3ad/

我希望将每张图片放在文本上方并集中。多年来我没有做过纯HTML和CSS，所以任何帮助都会受到赞赏。：）

Answer 1

试试这个：



ul.menu li{
    background: url(images/<image-name>.gif) no-repeat;
    list-style:none;
    padding-left:4%;
    margin-top:1%;
}

Answer 2

您是否在寻找this之类的内容？

HTML：

<ul id="menu">
    <li> <a href="/Home/Item01">
          <img src='http://lorempixel.com/48/48'/>
        <span>Menu Item 01</span>
        </a>

    </li>
    <li> <a href="/Home/Item02">
          <img src='http://lorempixel.com/48/48'/>
          <span>Menu Item 02</span>
        </a>

    </li>
    <li> <a href="/Home/Item03">
          <img src='http://lorempixel.com/48/48'/>
          <span>Menu Item 03</span>
        </a>

    </li>
</ul>

CSS：

ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: left;
}
ul#menu li {
    display: inline-block;
    list-style: none;
    padding-left: 15px;
}
ul#menu li a {
    background: none;
    color: #999;
    text-decoration: none;
    position:relative;
}
ul#menu li a:hover {
    color: #333;
    text-decoration: none;
}
ul#menu li a img { display:block; margin:auto; } 
ul#menu li a span{position:absolute; top:0; text-align:center;}

在列表项目菜单链接上显示图像

2 个答案: