1

メニューとサブメニューをデザインしています

サブメニューの配置に問題があります

メニュー

矢印が指しているように、サブメニューの最後を「詳細」オプションの右端に揃えたいと思います。

私が正しく使用する場合：-somepx; それは私がクロムで異なる配置を持っていることを必要とするでしょうそれは10pxであるのに対し、サファリでは5pxです

このためのクロスプラットフォームソリューションはありますか？

HTMLコードは次のとおりです。

<div id=header>
    <ul id="menu">
        <li><a href="#">Get Closer</a></li>
            <li><a href="#">Know your team</a></li>
            <li><a href="#" class="more">More</a>
                <ul>
                    <li><a href="#">Our Story</a></li>
                    <li><a href="#">Clients</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Case Studies</a></li>
                </ul>
            </li>
            <li><a href="#">Get in touch</a></li>
        </ul>
</div>

CSSコードは

#header #menu {
    margin-top: 25px;
    padding: 0px;
    float: right;
    list-style:none;
    clear: right;
}
#header #menu li {
    padding: 10px 15px 6px 15px;
    border: 1px solid #d2d2d2;
    position:relative;
    float: left;
    margin-left: -1px;
}
#header #menu li:hover { 
    background-color: #fff;
}
#header #menu li:first-child { 
    border-radius: 55px 0 0 55px;
    padding-left: 20px;
}
#header #menu li:last-child { 
    border-right: 1px solid #d2d2d2;
    border-radius: 0 55px 55px 0;
    padding-right: 20px;
}
#header #menu a {
    display:block;
    font: 20px 'Klavika Rg';
    text-transform: uppercase;
}
#header #menu .more:after {
    content: "{";
    font-family: 'WebSymbols';
    font-size: 22px;
    margin-left: 7px;
    line-height: 0;
}
/*--- DROPDOWN ---*/
#header #menu ul{
    list-style:none;
    position: absolute;
    right: 0px;
    margin: 0;
    visibility: hidden;
}
#header #menu ul li{
    position: relative; 
    float: left;
    margin-top: 0;
    padding: 6px 10px 1px 10px;
    margin-left: -1px;
}
#header #menu ul li:first-child { 
    border-radius: 15px 0 0 15px;
    padding-left: 20px;
}
#header #menu ul li:last-child { 
    border-right: 1px solid #d2d2d2;
    border-radius: 0 0 15px 0;
    padding-right: 20px;
}
#header #menu ul a{
    white-space:nowrap; 
    font: 15px 'Klavika Rg';    
    transition: all 0;
    -moz-transition: all 0; /* Firefox 4 */
    -webkit-transition: all 0; /* Safari and Chrome */
    -o-transition: all 0; /* Opera */
}
#header #menu li ul{ 
    margin-top: 6px;
    width: 500px;
}
#header #menu li:hover ul{ 
    visibility: visible;
}
4

2 に答える 2

1

さて、あなたがしなければならないことは、フルートをヘッダーに変更することです：

#header #menu ul li{
    position: relative; 
    float: right; <------- Here
    margin-top: 0;
    padding: 6px 10px 1px 10px;
    margin-left: -1px; <------- change this to -1px for prefection. (:
}
于 2012-11-04T08:00:08.130 に答える
0

クロスブラウザ検証で発生する可能性のあるこの問題や同様の問題を回避する最善の方法は、プロジェクトでリセットスタイルシートを使用することです。これにより、デフォルトですべてのブラウザのすべてのマージン、パディングなどがデフォルトで0になり、ほとんどの不整合が解消されます。

リセットスタイルシートを使用するには、提供したリンクをクリックし、cssをサイトからnotepad.txtファイルにコピーして貼り付け、reset.cssとして保存します。ファイルをプロジェクトフォルダーに配置し、他の.cssファイルと同じようにリンクします（ベストプラクティスを使用している場合）。

 <head>
     <link rel="stylesheet" type="text/css" href="reset.css">
 </head>

注： reset.cssはすべてをデフォルトに設定するので、必ずそれを確認して、0またはnoneに設定したくないものをすべて削除してください。

于 2012-11-04T08:21:07.370 に答える