Question

所以我正在开发一个个人项目，我想在每个导航菜单项的左侧添加图标图像。 3件事情在烦我;

我无法让菜单项左侧的图标
我无法使用max-width属性
我还需要在悬停时保留图标。

http://www.toastcafebar.com/nav/

<nav role="navigation">
  <ul>
  <a class="cinema" href="cinema.html">Movies</a>
  <a class="tv" href="tv.html">T.V Shows</a>
  </ul>
</nav>

...和CSS

nav[role="navigation"] ul {
display: inline-block;
text-align: center;
margin-top: 50px;
} 

nav[role="navigation"] ul a {
width: auto;
margin: 0 50px;
font-size: 2em;
padding: .5em;
width: auto;
}

a.cinema {
display: block;
background: url(images/pop.png) no-repeat left center;
padding-left: 75px;
}

.tv {
display: block;
background: url(images/tv.png) no-repeat;
padding-left: 100px;
}


nav a:link, a:visited {
font-weight: normal;
text-decoration: none;
outline: none;
color: #000;
}

nav a:hover {
color: #999;
background: #666;
-moz-border-radius: .5em;
border-radius: .55em;
padding: .25em;
}

有什么建议吗？

提前干杯

Answer 1

您需要做的是向<a>添加display:block;标签，并将图标作为背景图片，左对齐，不重复。然后确保在<a>上应用填充左侧，以使文本不与图像重叠。例如：

a.cinema {
    display: block;
    background: url(/path/to/img.png) no-repeat left center;
    padding-left: 90px;
}

以此为基础！不需要max-width ......

Answer 2

要使图标自动调整以适合“按钮大小”，您可以使用CSS3属性“background-size”。但我认为最好的方法是手动调整图标大小，有些浏览器还不支持CSS3属性。

http://www.css3.info/preview/background-size/

Answer 3

如下所示使用这两个课程，您可以回答，

nav a:hover {
    -moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
    background: url(images/pop.png) no-repeat scroll left center #666666;
    color: #999999;
}

a.cinema {
    display: block;
    background: url(/path/to/img.png) no-repeat left center;
    text-indent: 35px;
}

Answer 4

你的标记有点时髦。如果您有<ul>元素，那么您应该只有<li>个孩子。

HTML：

<nav role="navigation">
    <ul>
        <li><a class="cinema" href="cinema.html">Movies</a></li>
        <li><a class="tv" href="tv.html">T.V Shows</a></li>
    </ul>
</nav>

CSS：

nav[role="navigation"] ul {
    display: inline-block;
    text-align: center;
    margin-top: 50px; } 
nav[role="navigation"] ul li { 
    font-size: 2em;
    margin: 0 50px;
    display: inline-block; }
nav[role="navigation"] ul a {
    background-position: .5em 50%;
    background-repeat: no-repeat;
    text-decoration: none;
    outline: none;
    color: #000;
    padding: .5em .5em .5em 75px;
    display: block; }
nav[role="navigation"] ul li a.cinema { background-image: url(http://www.toastcafebar.com/nav/images/pop.png); }
nav[role="navigation"] ul li a.tv { background-image: url(http://www.toastcafebar.com/nav/images/tv.png); }
nav[role="navigation"] ul li a:hover {
    color: #999;
    background-color: #666;
    -moz-border-radius: .5em;
    border-radius: .55em; }

预览：http://jsfiddle.net/Wexcode/bGNgr/

如何使用CSS中的max-width属性添加导航图标图像

4 个答案: