Question

嘿，我在link旁边有图标时有点麻烦首先，我找不到可以移动文本的位置，以便图标显示正确而不在文本下面。其次是当你悬停文本时，图标会消失。

我制作了一个脚本，你可以看一下 https://jsfiddle.net/8nxrwbog/

感谢您的帮助！

Answer 1

＆＃13;

#menu-bar {
  width: 100%;
  line-height: 40px;
  position:relative;
  z-index:999;
}
#menu-bar li {
  background-color:black;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 6px 10px 4px 10px;
  margin: 0;
}
#menu-bar li ul li a {
  margin: 0;
}
#menu-bar li:hover > a {
	background-color: #0083c2;
    transition-delay: .1s;
	transition-duration: .8s;
}
#menu-bar .nav-button-home a { 
background:url("http://overnine.servergamers.net/3/images/icons/home20x20.png") no-repeat 0 13px;  padding-left: 22px
}

＆＃13;

<ul id="menu-bar">
   <li class="nav-button-home"><a href="#">Home</a></li>
   <li class="nav-button-home"><a href="#">Teams</a>
   <li class="nav-button-home"><a href="#">Sponsors</a></li>
   <li class="nav-button-home"><a href="#">WebTV</a></li>
   <li class="nav-button-home"><a href="#">Contact</a></li>
</ul>

＆＃13;

要移动图标旁边的文字，可以为＃menu-bar设置左边的填充.nav-button-home a

例如：padding-left：22px;

图标消失，因为您将整个背景更改为颜色。要仅更改背景颜色，您必须更改背景＆＃39;进入＆＃39; background-color＆＃39;在＃menu-bar li：hover＆gt; A.-C

Answer 2

如果增加左边的填充，则应该在列表项未悬停时修复可见性问题。我给出的建议是使用Font Awesome而不是图像，你可以像文本一样操作它，但它是一个图标。要查看它，请转到此处，它会为您提供所需的所有信息：http://fontawesome.io/。

Answer 3

您添加了图标作为背景，请尝试按标记添加

应该有效：

<table>
  <tr>
  <td>Name</td>
  <td><u>looooooooooooooong Word</u></td>
  <td><u>First</u></td>
  </tr>
    <tr>
  <td>Name</td>
  <td><u>tiny</u></td>
   <td><u>Referral</u></td>
  </tr>
</table>

和CSS：

<ul id="menu-bar">
                 <li class="nav-button-home"><a href="#"><img class="img" src="http://overnine.servergamers.net/3/images/icons/home20x20.png" /><em class="test">Home</em></a></li>
                 <li class="nav-button-home"><a href="#">Teams</a>
                 <li class="nav-button-home"><a href="#">Sponsors</a></li>
                 <li class="nav-button-home"><a href="#">WebTV</a></li>
                 <li class="nav-button-home"><a href="#">Contact</a></li>
                </ul>

您可以调整填充;）

Answer 4

将以下代码用于css

#menu-bar {
  width: 100%;
  line-height: 40px;
  position:relative;
  z-index:999;
}
#menu-bar li {
  background-color:black;
  float: left;
  position: relative;
  list-style: none;
  /*padding-left:5px;
  padding-right:5px;*/
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 6px 10px 4px 25px;
  margin: 0;
}
#menu-bar li ul li a {
  margin: 0;
}
#menu-bar li:hover > a {
    background-color: #0083c2;
    transition-delay: .1s;
    transition-duration: .8s;
}
#menu-bar .nav-button-home a { 
background:url("http://overnine.servergamers.net/3/images/icons/home20x20.png") no-repeat 0 13px; 
}

将此代码用于html

<ul id="menu-bar">
 <li class="nav-button-home"><a href="#">Home</a></li>
 <li class="nav-button-home"><a href="#">Teams</a>
 <li class="nav-button-home"><a href="#">Sponsors</a></li>
 <li class="nav-button-home"><a href="#">WebTV</a></li>
 <li class="nav-button-home"><a href="#">Contact</a></li>
</ul>

菜单链接CSS旁边的图标

4 个答案: