0

IE8とChromeの両方で正しく表示されるCSSメニューがあります。ただし、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>
4

3 に答える 3

2

今、あなたのlidisplay: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;
}

ライブデモ

于 2013-03-12T04:08:04.957 に答える
0

これに使用できます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。例については、このフィドルを参照してください。

于 2013-03-12T03:51:37.560 に答える
0

設定してみましたかpadding-start:0px 

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

padding-start要素に自動的に適用され<li>ます。

Mozillaのドキュメントpadding-start：https ：//developer.mozilla.org/en-US/docs/CSS/-moz-padding-start

webkit-paddingに関するその他のリソース（FFを含まないwebkit-marginも含む）：http ：//www.css-101.org/articles/base-styles-sheet-for-webkit-based-browsers/index.php

于 2013-03-12T03:05:51.443 に答える