1

この水平メニュー バーに問題があります。ウィンドウに（幅に関して）収まると思われますが、必要以上に少し長く続きます。また、top:0;left:0; であると想定されます。

私がすることはすべて、2つのことのいずれかが機能します。左上に揃えても幅が大きすぎるか、揃えられずに幅が収まります。

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Website Title</title>
    </head>
    <body>
    <style>
    body{
    }

    .bg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -5000;
    }
    #cssmenu ul {
        list-style-type:none;
        width:100%;
        position:absolute;
        display:block;
        height:33px;
        font-size:.6em;
        background: #76B3F1 url(images/menu-bg.png) repeat-x top left;
        font-family:Verdana,Helvetica,Arial,sans-serif;
        border:1px solid #000;
        margin:0;
        padding:0;
        top:0;
        left:0;
    }

    #cssmenu li {
        display:block;
        float:left;
        margin:0;
        padding:0;
    }

    #cssmenu li a {
        float:left;
        color:#A79787;
        text-decoration:none;
        height:24px;
        padding:9px 15px 0;
        font-weight:normal;
    }

    #cssmenu li a:hover,.current {
        color:#fff;
        background: #A3BAE6 url(images/menu-bg.png) repeat-x top left;
        text-decoration:none;
    }

    #cssmenu .current a {
        color:#fff;
        font-weight:700;
    }
    </style>

    <div id="cssmenu">
        <ul>
           <li class='active '><a href='#'><span>Home</span></a></li>
           <li><a href='#'><span>Products</span></a></li>
           <li><a href='#'><span>Company</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>

    </div>
    <div id="background">
        <img src="background/001.JPG" class="bg"/>
    </div>


    </body>
    </html>
4

5 に答える 5

2

これまでの回答は面倒なので、私のコメントを回答として再投稿するには:

スタイルのwidth:100%をleft:0;right:0に変更するだけです。ulこれは、IE6 より優れたものすべてでサポートされています。IE6 をサポートする必要がある場合は、そのexpression構文を使用します。

width:expression((this.parentNode.offsetWidth-2)+'px')
于 2013-03-23T03:10:27.477 に答える
2

box-sizing: border-box;css プロパティを追加します。

これにより、'100%' を計算するときに境界線を考慮するようにメニューに指示されます。

于 2013-03-23T03:01:08.627 に答える
0

overflow-x: hiddenあなたに追加body

于 2013-03-23T03:29:14.550 に答える
0

境界線を使用する代わりに、はめ込みボックスシャドウを使用してみませんか？プレフィックスを付ける必要がありますが、古いIEでは機能しません。私に関する限り、業界は古いIEの角を曲がっており、すべての影と丸みを帯びた角を与えるのに苦労する価値がないことを理解しています。

box-shadow:inset 0 0 1px 0 #000;
于 2013-03-23T03:36:11.550 に答える
0

box-sizingRockafella が提案したように CSS3 プロパティを使用したくない場合は、この CSS の編集を試すことができます。

を取り除き、コンテナにパディングをposition: absolute追加し、にマージンを追加しました。これにより、コンテンツ ボックスの幅に、指定した1px の境界線が含まれなくなります。1px<div>-1px<ul>width: 100%<ul>

于 2013-03-23T03:05:39.803 に答える