3

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

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

但我遇到的问题是，当字体大小增加（inIE 8和Chrome链接

我尝试做 atable而不是 the ，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>
4

5 回答 5

2

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

这样，当您增加字体大小时，文本行的高度不会改变。默认值为line-height，normal这意味着菜单每行的高度将随字体大小调整。

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

于 2012-09-22T07:24:19.857 回答
0

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

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

希望它能解决你的问题

于 2012-09-22T07:30:46.887 回答
0

将您的 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;
 }
于 2012-09-22T10:15:39.490 回答
0

Chrome我为此找到了一个完美的简单解决方案，它IE一直对我Firefox有用win7。

我在链接 ( ) 中放置了一个包含一个单元格的表格，该单元格<a>具有相同的width和heightas <a>（这是图像尺寸）。

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

我删除了所有padding. 因为如果我将 ( height, width) 与 ( padding) 结合起来，它将在不同的浏览器上产生不同的结果（尤其是IEand Chrome）。

将东西放入其中可能是一个错误的想法，<a>但它确实适用于大多数浏览器。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

这使得我不知道为什么<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>

谢谢你们。

于 2012-10-09T11:16:14.457 回答
0

前段时间我有同样的问题。我为“.menuLink”做了一个带有注释更改的 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 */
}

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

于 2014-07-18T08:16:29.057 回答