0

我已经创建了一个菜单，但无法解决这个问题，所以我希望有人可以帮助我:(

问题我菜单中的最后一个 li（锚标签）一直在我的菜单下方折叠，无论我做什么问题都仍然存在。在 Firefox 中看起来不错但是在所有其他浏览器中，这是一场灾难......

我尝试过：添加溢出：隐藏；到我的菜单包装器，尝试在最后一个 ul 标记后添加“清除两个”div，添加 display:inline-block 到 li 标签，还有很多解决我的问题的其他方法，但没有任何效果：（
我没有为我的锚标签设置显式宽度（我真的不想这样做！）。
在 Firefox 中看起来很完美：
http ://robertpeic.com/kyani /template/menu.png
在其他浏览器中看起来像这样：（请注意没有蓝色按钮，因为它出现在我的菜单下方）
http://robertpeic.com/kyani/template/menu2.png
我不想要这个：
http ://robertpeic.com/kyani/template/menu3.png

问题：即使没有空间，如何防止我的 li's 低于我的菜单？
谢谢你的帮助！！

链接到我的菜单

相关的 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

我添加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 的宽度设置为 910 像素。它会解决你的问题，也不会显示任何白色间距

于 2012-12-22T22:20:20.537 回答
0

您的整个 html 将如下所示。在测试您的代码时，我发现，如果我省略第一行 DocType... 菜单会在 IE 中被破坏。在 Chrome 中它工作正常。所以AFAIK，你的问题是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

我现在感觉很蠢 :) 为了防止我的 li 低于我只用其他 div 包装我的菜单并将该 div 设置为溢出隐藏并且它工作得很好！谢谢大家的帮助！！！

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 回答