0

メニューを作成しましたが、この問題を解決できないので、誰かが私を助けてくれることを願っています:(

問題メニュー内の最後の li (アンカータグ) がメニューの下に崩れ続け、何をしても問題が解決しません。Firefox では問題ないように見えますが、他のすべてのブラウザではそれは惨事です...

私は試しました：overflow:hidden;をメニューラッパーに追加し、最後のulタグの後に「両方をクリア」divを追加しようとし、liタグにdisplay:inline-blockを追加しました。私の問題に対する他のアプローチですが、何も機能しません:(
アンカータグに明示的な幅を設定しませんでした(本当にやりたくありません! )。
Firefoxでは完璧に見えます:
http://robertpeic.com/kyani他のブラウザの/template/menu.png
は次のようになります: (私のメニューの下にあるので、青いボタンがないことに注意してください)
http://robertpeic.com/kyani/template/menu2.png
私はこれを望んでいません
:

質問:空きがない場合でも、メニューがメニューを下回らないようにするにはどうすればよいですか?
ご協力いただきありがとうございます！！

私のメニューへのリンク

関連する CSS は次のようになります。

.mainmenu{
display:block;
width:906px;
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
}

.mainmenu ul{
list-style-type:none;
}

.mainmenu ul li {
float:left;
}

.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}

.mainmenu ul li a:hover{
color:#ffffff;
}

.mainHover{
background-image:url('http://robertpeic.com/kyani/template/hoverm.png');
display:block;
position:relative;
background-repeat:repeat-x;
z-index:-50;
}

HTML は次のようになります。

<div class="mainmenu">
<ul>
<li><a href="#">Početna</a></li>
<li><a href="#">Ky&auml;ni</a></li>
<li><a href="#">Trokut zdravlja</a></li>
<li><a href="#">Poslovna prilika</a></li>
<li><a href="#">Info predavanja</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div><!--/mainmenu-->
4

4 に答える 4

0

以下に示すように、html全体が表示されます。コードをテストしているときに、最初の行の DocType を省略すると、メニューが IE で壊れてしまうことがわかりました。Chromeでは正常に動作します。私の知る限り、あなたの問題はDoctypeにありました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>

        <style>
            .mainmenu
            {
                display: block;
                width: 906px;
                margin: 0px auto;
                height: 42px;
                background-image: url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
                background-repeat: repeat-x;
                position: relative;
                margin-top: -15px;
                z-index: 160;
            }

            .mainmenu ul
            {
                list-style-type: none;
            }

            .mainmenu ul li
            {
                float: left;
            }

            .mainmenu ul li a
            {
                text-decoration: none;
                display: block;
                font-family: "Palatino Linotype" , "Book Antiqua" ,Palatino,FreeSerif,serif;
                font-size: 20px;
                padding: 0 20px ;
                color: #383838;
                border-left: 1px solid #dedede;
                height: 42px;
                line-height: 42px;
                z-index: 100;
            }

            .mainmenu ul li a:hover
            {
                color: #ffffff;
            }

            .mainHover
            {
                background-image: url('http://robertpeic.com/kyani/template/hoverm.png');
                display: block;
                position: relative;
                background-repeat: repeat-x;
                z-index: -50;
            }
        </style>
    </head>
    <body>
    <div class="mainmenu">
        <ul>
            <li><a href="#">Pocetna</a></li>
            <li><a href="#">Ky&auml;ni</a></li>
            <li><a href="#">Trokut zdravlja</a></li>
            <li><a href="#">Poslovna prilika</a></li>
            <li><a href="#">Info predavanja</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </div>
</body>
</html>
于 2012-12-22T22:26:04.053 に答える
0

パディングを追加overflow:hiddenして変更したところ、うまくいきました。.mainmenu.mainmenu ul li a

.mainmenu
overflow:hidden;

.mainmenu ul li a
padding:0 22px 0 23px;

クロス ブラウザー互換性を備えた一貫した全幅のメニュー バーを取得する最善の方法は、LI の幅を強制することであることがわかりました。ただし、上位互換性は高くありません。これは、ビジュアル デザインの完全性を維持するために私が見つけた最良の方法です。

于 2012-12-22T22:19:27.087 に答える
0

メインメニュー div の幅を 910px に設定します。それはあなたの問題を解決し、白いスペースも表示しません

于 2012-12-22T22:20:20.537 に答える
0

私は今とてもばかげているように感じます:)私のliが下に行かないようにするために、メニューを他のdivでラップし、そのdivをオーバーフロー非表示に設定しただけで、完璧に機能しました! THX 皆様、お世話になりました！！！

CSS は次のようになります。

.mainmenu{
 display:block;
 width:903px;
 }

 .mainmenu ul{
 list-style-type:none;
 }

 .mainmenu ul li {
 float:left;
  }

 .mainmenu ul li a{
 text-decoration:none;
 display:block;
 font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
 font-size:20px;
 padding:0 23px 0 23px;
 color:#383838;
 border-left:1px solid #dedede;
 height:42px;
 line-height:42px;
 z-index:100;
 }

 .mainmenu ul li a:hover{
 color:#ffffff;
 }

.menuwrap{
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
width:900px;
overflow:hidden;
}

HTML は次のようになります。

      <div class="menwrap">
      <div class="mainmenu">
      <ul>
      <li><a href="#">Početna</a></li>
      <li><a href="#">Ky&auml;ni</a></li>
      <li><a href="#">Trokut zdravlja</a></li>
      <li><a href="#">Poslovna prilika</a></li>
      <li><a href="#">Info predavanja</a></li>
      <li><a href="#">Kontakt</a></li>
      </ul>
      </div><!--/mainmenu-->
      </div><!--/menuwrap-->
于 2012-12-23T14:45:21.897 に答える