Html 如何对齐菜单栏上的图片？

我正在做一个菜单栏。我有一个红色的条作为背景，列表项是菜单点和它们之间的线

没有台词，一切都很好，但当我把它们放进去时，它们破坏了整个菜单，因为它们太低，文本下降，我无法让它回到它们的位置，也无法恢复台词

部分代码：

HTML

我怎样才能将它们都移到杆的中心上方？

方法1 现在，您正在使用

img

s显示您的边界。这是可行的，我将在这里向您展示如何使用CSS

border

s，我将在下面的第2部分中介绍

HTML:

---

方法2 更好的方法是在左右两侧使用

border

s。与使用内联

img

s相比，以下是一些优势

• 少一个HTTP请求，这将在加载页面时节省时间
• 将来更容易更改。通过使用rgba、白色/黑色和透明度，我们可以获得外观完美的边框，即使您更改标题下的背景颜色

我们这样做的方法是在每个

a

中添加一个

左边框

，并使其变亮。然后添加一个

右边框

，使其变暗

HTML:

上述内容将使您的边界看起来非常完美，但从外观上看，您将错过最外层的边界。我们可以使用子选择器解决此问题：

#menu ul li:first-child {
    border-left:solid 1px rgba(0,0,0,0.3);
}

#menu ul li:last-child {
    border-right:solid 1px rgba(255,255,255,0.3);
}

---

这种方法更符合最佳实践，并且从长远来看更易于维护。然而，web的最大优点是灵活性，因此您可以选择其中之一。

对图像质量感到抱歉！如果您在新选项卡中打开它，您可以更清楚地看到线条。这些是

img

的三维边框吗？是的，在菜单的边框之间链接。菜单栏是CSS中的Menu.png背景。好的。我正在开发一个JSFIDLE，我会在一分钟后发布一个答案。谢谢！我正在等待！

#menu{
padding:13px 5px 13px 5px;
background-image:url("./kepek/menu.png");
}

#menu1{
color:#fff;
margin:0 40px 0 10px;
line-height:20px;
}

#menu2,#menu3,#menu4,#menu5{
color:#fff;
margin:0 40px 0 35px;
padding-bottom:10px;
}

<nav id="menu">
    <ul>
        <img src="http://i.stack.imgur.com/z45Gy.png">
        <li><a id="menu1" href="#">Corturi Alutent</a></li>
        <img src="http://i.stack.imgur.com/z45Gy.png">
        <li><a id="menu2" href="#">Schema Bloc</a></li>
        <img src="http://i.stack.imgur.com/z45Gy.png">
        <li><a id="menu3" href="#">Galerie Foto</a></li>
        <img src="http://i.stack.imgur.com/z45Gy.png">
    </ul>
</nav>

#menu {
    background-image:url("./kepek/menu.png"); //YOUR BACKGROUND THAT I DON'T HAVE
    background-color:red; // TEMP COLOR TO REPLACE THE BACKGROUND IN THE FIDDLE. REMOVE THIS LINE.
    height:60px; //IF YOU FLOAT ITEMS, YOU NEED TO SPECIFY A HEIGHT
}

#menu ul {
    list-style:none;
    height:100%;
}

#menu ul li {
    float:left;
    margin-top:10px;
}

#menu ul img {
    float:left;
    margin-top:10px;
}

#menu ul li a {
    color:white;
    text-decoration:none;
    padding:10px;
    display:block;   
}

<nav id="menu">
    <ul>
        <li><a id="menu1" href="#">Corturi Alutent</a></li>
        <li><a id="menu2" href="#">Schema Bloc</a></li>
        <li><a id="menu3" href="#">Galerie Foto</a></li>
    </ul>
</nav>

#menu {
    background-image:url("./kepek/menu.png");
    background-color:red;
    height:60px;
}

#menu ul {
    list-style:none;
    height:100%;
}

#menu ul li {
    float:left;
    margin-top:10px;
}

#menu ul li a {
    color:white;
    text-decoration:none;
    padding:10px;
    display:block;
    border-left:solid 1px rgba(255,255,255,0.3);
    border-right:solid 1px rgba(0,0,0,0.3);    
}

#menu ul li:first-child {
    border-left:solid 1px rgba(0,0,0,0.3);
}

#menu ul li:last-child {
    border-right:solid 1px rgba(255,255,255,0.3);
}