Question

我有一个CSS菜单，可以在IE 8和Chrome中正确显示。但是在Firefox中似乎添加了额外的填充，并将最后一个菜单项推送到下一行。

任何人都可以看看下面的内容并告诉我如何修复它。

CSS下面：

#wrap {
    width: 920px;
    margin: 0 auto;
}

#cssmenu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
    font-size:10px;
    font-weight:bold;   
    }
#cssmenu ul{
    background:#333333;
    height:37px;
    list-style:none;
    margin:0;
    padding:0;
    border-bottom: 3px solid #2580a2;
    }
#cssmenu li{
    float:left;
    padding:0px;

    }
#cssmenu li a{
    background:#333333 url('images/seperator.gif') bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:37px;
    margin:0px;
    padding:0px 22px;
    text-align:center;
    text-decoration:none;
    }



#cssmenu li a:hover, #cssmenu ul li:hover a{
    background: #2580a2;
    color:#FFFFFF;
    text-decoration:none;
    }
#cssmenu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }
#cssmenu li:hover ul{
    display:block;

    }
#cssmenu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
    }
#cssmenu li:hover li a{
    background:none;

    }
#cssmenu li ul a{
    display:block;
    height:35px;
    font-size:10px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
#cssmenu li ul a:hover, #cssmenu li ul li:hover a{
    background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
    }
#cssmenu p{
    clear:left;
    }

下面的HTML：

<html>
<head>
<link href="menu_assets/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<div id='cssmenu'>
<ul>
   <li><a href='index.html'><span>HOME</span></a></li>
   <li class='has-sub'><a href='#'><span>OPERATIONS</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li class='last'><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>AIRWORTHINESS</span></a></li>
   <li><a href='#'><span>REGULATIONS AND POLICY</span></a></li>
   <li><a href='#'><span>MANUALS AND FORMS</span></a></li>
   <li><a href='#'><span>EDUCATION</span></a></li>
   <li><a href='#'><span>ABOUT CASA</span></a></li>
   <li id='cssmenulast'><a href='#'><span>SERVICES</span></a></li>
</ul>
</div>
</div>
</body>
</html>

Answer 1

现已习惯 li

中的display:inline-block;和删除 float left

就像这样

#cssmenu ul{
white-space:nowrap;  // add this line
font-size:0;   // add this line
}

#cssmenu li{
float:left; // remove this line
display:inline-block; // add this line
vertical-align:top; // add this line
font-size:10px;
padding:0px;
}

<强> Live Demo

Answer 2

您是否尝试过设置padding-start:0px

#container {
 -moz-padding-start: 0px;    // firefox
 -webkit-padding-start: 0px; // safari
 padding-left: 0px;          // chrome
}

padding-start会自动应用于<li>元素。

padding-start的Mozilla文档：https://developer.mozilla.org/en-US/docs/CSS/-moz-padding-start

有关webkit-padding的更多资源（还包括webkit-margin不包括FF ）：http://www.css-101.org/articles/base-styles-sheet-for-webkit-based-browsers/index.php

Answer 3

您可以使用display: table。具有100％宽度的优点，并且可以按比例缩小以获得更小的分辨率。

#cssmenu ul
{
    display: table;
    width: 100%;
}

#cssmenu li
{
    display: table-cell;
    float: none;
}

#cssmenu li a
{
    padding: 0; /* use something like "0 10px" for more homogenous widths */
}

现在，您可以通过padding #cssmenu li a来调整项目宽度。有关示例，请参阅此Fiddle。

Firefox为css菜单添加了额外的填充

3 个答案: