Question

好的，这很简单。我首先创建了一个通常的“Home”按钮链接到网站的主页，但“Home”这个词看起来太明显了。因此，我尝试插入一个图标代替该单词，但它不合适。我在我的CSS中尝试过一些东西，但它搞乱了整个（用于创建导航菜单）。屏幕截图已附上。如果有人能看到什么错误请{.0}}

CSS： -

 ul#menu
{
padding: 0px;
position: relative;
margin: 0;

}
ul#menu li
{
display: inline;
text-decoration:solid;

}
ul#menu li a 
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}

HTML： -

<ul id="menu">
    <li id="Home_Link"><a href="Home"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></a></li>
    <li><a href="Men">MEN</a></li>
    <li><a href="Women">WOMEN</a></li>
    <li><a href="Kids">KIDS</a></li>
    <li><a href="Design">DESIGN!!</a></li>

Answer 1

使用当前样式，您需要使用图像的垂直对齐和边距，例如：

ul#menu li#Home_Link a img {
  vertical-align: text-bottom;
  margin-bottom: -5px;
}

作为旁注，不建议您使用ID作为元素 - 如果需要，请使用类。并降低样式声明的特殊性，例如.home-link img

如何在<li>元素中正确显示图像？</li>

1 个答案: