Question

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

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

我试过：添加溢出：隐藏;到我的menuwrapper，尝试在最后一个ul标签后添加“clear both”div，添加display：inline-block to li tags，以及很多其他方法解决我的问题，但没有任何作用:(左边我没有设置显示我的锚标签的宽度（我真的不想这样做！）。
在Firefox中看起来很完美：
{{3 }}
在其他浏览器中看起来像这样：（注意没有蓝色按钮，因为它来自我的菜单）
http://robertpeic.com/kyani/template/menu.png
我不想这样：
http://robertpeic.com/kyani/template/menu2.png

问题：即使没有空间，如何防止我的菜单低于我的菜单？
感谢您的帮助!!

http://robertpeic.com/kyani/template/menu3.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-->

Answer 1

我将overflow:hidden添加到.mainmenu并更改了.mainmenu ul li a的填充，这对我有用。

.mainmenu
overflow:hidden;

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

我发现获得具有跨浏览器兼容性的一致全宽菜单栏的最佳方法是强制LI的宽度。虽然它不是非常向前兼容。这是我发现保持视觉设计完整性的最佳方式。

Answer 2

将mainmenu div的宽度设置为910px。它将解决您的问题，也不会显示任何白色间距

Answer 3

您的整个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>

Answer 4

我现在感觉很愚蠢:)为了防止我的李进入下面我只用其他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-->

即使没有空间，如何防止我的菜单低于菜单？

4 个答案: