方法1

Question

我在菜单栏上工作。我有红色条作为backgorund，列表项是菜单点和它们之间的线。

没有线条，一切都很顺利，但是当我把它们放进去时，它们会破坏整个菜单，因为它们太低而且文字下降了，我无法将它恢复到它们的位置，也没有线条。

The menu

部分代码：

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

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

方法2

更好的方法是在左侧和右侧使用border s。以下是使用内联img s“

的一些优点

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

我们这样做的方法是为每个border-left添加a，然后点亮它。然后是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);
}

此方法更适合最佳实践，从长远来看，您可以更轻松地进行维护。然而，关于网络的好处是灵活性，所以你真的可以选择。

如何在菜单栏上对齐图片？

1 个答案:

方法1

方法2