3

4つのリンク（水平方向はページの上部中央）を含むhtml/メニューをWebページに作成したいと思います。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>
4

5 に答える 5

2

line-heightメニュー リンクに固定を追加してみてください(例: line-height:26px;)。

そうすれば、font-size を大きくしても、テキスト行の高さは変わりません。のデフォルト値はline-heightですnormal。これは、メニューの各行の高さが font-size に合わせて調整されることを意味します。

詳細: http://www.w3.org/wiki/CSS/Properties/line-height

于 2012-09-22T07:24:19.857 に答える
0

Chrome、IEおよびで機能する、これに対する完璧で簡単な解決策を見つけましFirefoxたwin7。

リンク ( <a>)内widthに1 つのセルを含む表を配置heightします<a>。

また、テーブルを作成しました: text-align:center. text-align:centerテーブル内のテキストが水平方向に中央揃えになるようにしました。テーブルの利点は、マウスをホバーしたときにフォントサイズが変更されても、テキストが垂直方向に中央揃えになることです。また、表は、フォントサイズが大きくなったときにリンク画像や他のリンクが移動するのを防ぎました。

すべて削除しpaddingました。height( , width) と ( )を組み合わせるとpadding、ブラウザごとに異なる結果が生成されるためです (特にIEと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 に答える
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 に答える