个人中心
gpt4 book ai didi

html - Firefox 向 css 菜单添加额外的填充

转载 作者：太空宇宙 更新时间：2023-11-04 04:41:35 25 4
gpt4 key购买 nike

我有一个 CSS 菜单，它在 IE 8 和 Chrome 中都能正确显示。然而在火狐中似乎添加了额外的填充并将最后一个菜单项推到下一行。

谁能看看下面的内容并告诉我如何解决它。

下面的 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>

最佳答案

现在用于 display:inline-block; 和 remove float left in your li

像这样 

#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

关于html - Firefox 向 css 菜单添加额外的填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15352257/

25 4 0
文章推荐： html - 将按钮置于流体图像的中央
文章推荐： javascript - 使用 jquery 在 div 内动态更改图像
文章推荐： php - 无法使用来自 php 的电子邮件发送多个文本/变量
文章推荐： jquery - 根据屏幕大小调整 iframe 的宽度和高度