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

Question

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

没有线条一切都很好，但是当我把它们放进去时，它们破坏了整个菜单，因为它们太低了，文本下降了，我无法把它放回原来的位置，也没有线条。

部分代码:

HTML

<nav id="menu">
        <ul>
            <li><a id="menu1" href="#">Corturi Alutent</a></li>
            <img class="elvalaszto" src="./kepek/menu_elvalaszto.png"/>
            <li><a id="menu2" href="#">Schema Bloc</a></li>
            <img class="elvalaszto" src="./kepek/menu_elvalaszto.png"/>
            <li><a id="menu3" href="#">Galerie Foto</a></li>
            <img class="elvalaszto" src="./kepek/menu_elvalaszto.png"/>
            <li><a id="menu4" href="#">Accesorii Alutent</a></li>
            <img class="elvalaszto" src="./kepek/menu_elvalaszto.png"/>
            <li><a id="menu5" href="#">Oferte Speciale</a></li>
        </ul>
    </nav>

CSS

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

我怎样才能将它们都向上移动到栏的中心？

Answer 1

方法一

现在，您正在使用 img 来显示您的边框。这可以工作，我将在此处向您展示如何操作，但我真的建议您改用 CSS border，我将在下面的第 2 部分中展示。

Working Fiddle

HTML:

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

CSS:

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

---

方法二

更好的方法是左右使用border。与使用内联 imgs"

相比，这里有一些优势

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

我们这样做的方法是为每个a添加一个border-left，并使其变亮。然后是 border-right 并使其变暗。

Working Fiddle

HTML:

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

CSS:

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

此方法更符合最佳实践，从长远来看，您也更容易维护。然而，Web 的优点在于灵 active ，因此您实际上可以选择其中之一。