Question

我想在我的网页上制作一个包含四个链接的html / css菜单（水平位于页面顶部中央）。

我希望将鼠标悬停在（a:hover）上时菜单链接字体大小会增加。

但我遇到的问题是当字体大小增加时（IE 8和Chrome）菜单项会改变它的位置（向下一点）并且我不希望这种情况发生，请注意我使用背景图像（152 * 52）作为链接

我尝试使用table代替inline-block，但它造成了更大的混乱。

我也尝试使用margin和padding，但这两种方式都无效。

我是html / css的新手，所以对html / css中任何内容的任何建议都会受到赞赏并原谅我的英语不好。

这是我的代码：

<html>
<head>
<title>Home page</title>
<style type="text/css">

body {
    font-family:Palatino, ‘Book Antiqua’, Georgia, Garamond, ‘Times New Roman’, Times, serif;
    font-size: 13px;
    color: #000060;
    background-color: #005070;
    background-repeat:repeat-x;
    text-align:center;
}

.menu
{
    height:64px;
    width:100%;
    background-image:url(img/bglb2.png);
    background-repeat:repeat-x;
    text-align:center;
}

.menuLink, .menuLink:visited
{
    color:#FFFFFF;
    background-image:url(img/btk.png);
    text-decoration:none;
    font-size: 20px;
    width:132px;
    height: 32px;
    padding: 10px;
    display:inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 6px;
}

.menuLink:hover
{
    color:#CC7011;
    background-image:url(img/bto.png);
    font-size: 26px;
}
</style>
</head>

<body>
<div class="menu">
    <a class="menuLink" href="index.html">Home</a>
    <a class="menuLink" href="page1.html">Page1</a>
    <a class="menuLink" href="page2.html">Page2</a>
    <a class="menuLink" href="page3.html">Page3</a>
</div>

</body>
</html>

Answer 1

尝试在菜单链接中添加固定的line-height（例如line-height:26px;）。

这样，当你增加font-size时，文本行的高度不会改变。 line-height的默认值为normal，表示菜单每行的高度将根据字体大小进行调整。

更多信息：http://www.w3.org/wiki/CSS/Properties/line-height

Answer 2

您可以编辑您的css类来解决问题，这里是更新类：

.menuLink:hover
{
    color:#CC7011;
    background-image:url(img/bto.png);
    font-size: 26px;
    padding:0px 10px 10px 10px;
}

希望它能解决你的问题

Answer 3

将您的HTML代码更改为

 <div class="menu">
 <ul>
   <li><a class="menuLink" href="index.html">Home</a></li>
   <li> <a class="menuLink" href="page1.html">Page1</a></li>
   <li><a class="menuLink" href="page2.html">Page2</a></li>
   <li><a class="menuLink" href="page3.html">Page3</a></li>
</ul>
</div>

添加此款式

 ul,li{
display:inline-block;
list-style:none;
line-height:60px;
vertical-align:bottom;
 }

Answer 4

我找到了一个完美的简单解决方案，适用于Chrome，IE和Firefox上的win7。

我在链接（<a>）中放置了一个包含width height和<a> text-align:center的图片尺寸的表格。

还制作了表：text-align:center。 padding确保表格内的文字水平居中。并且表格的优点是即使在悬停鼠标时字体大小发生变化，文本也会垂直居中。此外，当字体大小增加时，表格也阻止了链接图像和其他链接的移动。

我删除了所有height。因为如果我将（width，padding）与（IE）合并，则会在不同的浏览器上产生不同的结果（尤其是Chrome和<a>）。< / p>

将内容放入<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">可能是错误的想法，但它确实适用于大多数浏览器。

我还把这行代码作为我的html文件的第一行：

<table>

使<a>继承了链接<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Home page</title> <style type="text/css"> body { font-family:Palatino, ‘Book Antiqua’, Georgia, Garamond, ‘Times New Roman’, Times, serif; font-size: 13px; color: #000060; background-color: #005070; background-repeat:repeat-x; text-align:center; } .menu { height:64px; width:100%; background-image:url(img/bglb2.png); background-repeat:repeat-x; text-align:center; } .menuLink, .menuLink:visited { color:#FFFFFF; background-image:url(img/btk.png); text-decoration:none; font-size: 20px; width:152px; height: 52px; display:inline-block; margin-left: 10px; margin-right: 10px; margin-top: 6px; } .menuLink:hover { color:#CC7011; background-image:url(img/bto.png); font-size: 26px; } table.ml { text-align: center; width:152px; height: 52px; } </style> </head> <body> <div class="menu"> <a class="menuLink" href="index.html"><table class="ml"><tr><td>Home</td></tr></table></a> <a class="menuLink" href="page1.html"><table class="ml"><tr><td>Page1</td></tr></table></a> <a class="menuLink" href="page2.html"><table class="ml"><tr><td>Page2</td></tr></table></a> <a class="menuLink" href="page3.html"><table class="ml"><tr><td>Page3</td></tr></table></a> </div> </body> </html>中的所有内容，我不知道为什么会这样做，但它确实简化了内容。

结果代码是：

{{1}}

谢谢大家。

Answer 5

前段时间我遇到同样的问题。我已经对{＆＃39; .menuLink＆＃39;进行了评论性更改FIDLE。

.menuLink, .menuLink:visited {
    color:#FFFFFF;
    background-image:url(img/btk.png);
    text-decoration:none;
    font-size: 20px;
    width:132px;
    /* height: 32px; */ /* removed */
    padding: 0 10px; /* changed here */
    line-height: 52px; /* added code */
    display:inline-block;
    vertical-align: middle; /* Added code */
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 6px;

    /* In case you have longer 2 words text */
    white-space: nowrap;
    overflow: hidden; /* to hide overflowed text */
}

希望这可以帮助其他人，或者如果我的解决方案是goo，你可以修改你的代码

html / css：使用链接移动位置，以便在悬停鼠标时增加字体大小

5 个答案: