HTML CSS 格式化菜单块/悬停背景答案

【问题标题】：HTML CSS Formatting a menu block/hover backgroundHTML CSS 格式化菜单块/悬停背景
【发布时间】：2014-06-20 17:04:19
【问题描述】：

我想知道更改当前菜单的“正确”方法是什么，如下所示：
对此：

我遇到的问题是将按钮放入这些块中，这些块会在悬停时改变背景和垂直对齐，我是否使用填充？块？桌子？帮助：S

（颜色无所谓）

CSS：

.menu{
        clear: both;
        background-image:url(meniuBG.jpg);
        height:55px;
        line-height: 10px;
      }

.menu a{

        text-align: center;
        text-decoration: none;
        font-style:italic;
        color:rgb(193,193,193);
        margin-right: 25px;
        margin-left: 25px;
    }

HTML（不明原因）：

<div class="meniu">

        <a href="#">NAUJIENOS</a>
        <a href="#">KREPSINIO VADOVAS</a>
        <a href="#">TRENIRUOTES</a>
        <a href="#">IDOMYBES</a>
        <a href="#">GALERIJA</a>
        <a href="#">APIE MUS</a>

</div>

【问题讨论】：

你能发个小提琴吗？
可以，但是没有背景图片，不知道有没有用：jsfiddle.net/gUhCp
其实这里：jsfiddle.net/gUhCp/1我添加了黑色/红色框，而不是图片中看到的背景

标签： html css menu hover block

【解决方案1】：

.menu {
        ...
        height:55px;
        /* line-height: 10px;  delete this  */
}

.menu a { 
        ...
        line-height: 55px; /* add this */
}

因为你想垂直居中你的 <a> ，有很多方法可以做到这一点，你可以在谷歌上搜索有很多 tuto。

我给你的解决方案是让line-height 等于heigh (55px)。当您的文本仅在一行时，此解决方案有效。

对于悬停，只需制作 <a> display: inline-block; 并将 margin 替换为 padding

.menu a{

text-align: center;
text-decoration: none;
font-style: italic;
color: rgb(193,193,193);
/* margin-right: 25px; */
/* margin-left: 25px; */
padding: 0 25px;
line-height: 55px;
display: inline-block;

}

这是FIDDLE

【讨论】：

谢谢，这似乎对齐了，但是悬停呢？它现在只突出显示文本：jsfiddle.net/DnBR2/1 如果我制作“a”内联块，它会垂直突出显示它，但侧面不会突出显示。
我使用了 display:inline-block 和 padding-left 和 right 10px，现在它似乎像示例中一样工作，不过谢谢！ :)
对你有好处我也会更新我的答案如果你想看看FIDDLE

【解决方案2】：

尝试添加这个

.menu a{
    text-align: center;
    text-decoration: none;
    font-style:italic;
    color:rgb(193,193,193);
    margin-right: 25px;
    margin-left: 25px;
    line-height:55px;
    display: inline-block;
}
.menu a:hover{
    background-color: #E7550C;
}

【讨论】：