0

所以我正在做一个个人项目，我想在每个导航菜单项的左侧添加图标图像。3件事困扰着我；

  1. 我无法让图标位于菜单项的左侧
  2. 我无法使用 max-width 属性调整图标大小
  3. 我还需要图标在悬停时保持原位。

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;
}

有什么建议么？

提前喝彩

4

4 回答 4

1

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

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

以此为基础！不需要最大宽度...

于 2011-12-15T15:38:41.470 回答
1

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

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

于 2011-12-15T15:47:00.327 回答
1

使用这两个类如下，你可能会回答，

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;
}
于 2011-12-15T16:52:31.957 回答
1

你的标记有点时髦。如果你有一个<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/

于 2011-12-15T16:55:33.097 回答