0

ブラウザの全幅に沿ってナビゲーションを配置する必要があります。

問題は、最初の項目をクリックすると、その項目のブラウザ幅全体が影響を受けることです。

こちらも最後の商品です

そのために、nav first-child と nav last child を使用しました。ここで私の作品を見ることができます。

これはfirefoxでうまく機能します。しかし、クロムでは、ブラウザをズームイン/ズームアウトすると、ナビゲーション項目が壊れます。

HTML コード:

<body>
    <div id="header" class="outer">
        <div class="inner">
            <h1 class="logo"><a href="index.html"><img src="images/logo-1.png" width="314" height="158" alt="logo" /></a></h1>
            <div class="nav">
                <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">Nieuws</a></li>
                    <li><a href="#">Praktijk</a></li>
                    <li><a href="#">Behandelingen</a>
                        <ul>
                            <li><a href="#">ouderen</a></li>
                            <li><a href="#">Sport</a></li>
                            <li><a href="#">Algemeen</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="inner">
        <div id="content">
            <p>Lorem...</p>

        </div>
    </div>
</body>

CSS コード:

body {
    background: #fff;
    color: #000;
    font-family: 'HelveticaNeueLTStd55Roman';
    font-size: 14px;
    line-height: 1em;
    overflow-x: hidden;
}

.outer {
    width: 100%;
    float: left;    
}
.inner {
    width: 941px;
    margin: 0 auto;
}

#header {
    width: 100%;
    float: left;
    padding: 22px 0 5px 0;
    background: url(../images/header-bg.png) repeat-x;  
}
h1.logo a {
    display: block;
    float: left;
}

.nav { 
    width: auto;
    float: left;
    margin: 24px 0 0 0;
}
.nav ul ul {
    display: none;
}
.nav ul li:hover > ul {
    display: block;
}

.nav ul {
    list-style: none;   
}

.nav ul li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}
.nav ul li a {
    min-width: 155px;
    text-align: center;
    margin: 0 0 8px -21px;
    padding: 0 22px 0 32px;
    display: block;
    font-size: 14px;
    color: #cc3840;
    line-height: 28px;
    font-family: 'HelveticaNeueLTStd75Bold';
    text-transform: uppercase;
    border-radius: 14px;
    background: #fff;
}
.nav ul li.active a, .nav ul li a:hover {
    color: #cf383c;
    background: none;
}
.nav ul li:first-child a {
    margin-left: -900%;
    padding-left: 900%; 
}
.nav ul li:last-child a {
    margin-right: -900%;
    padding-right: 900%;    
}
.nav ul li:hover a {
    color: #cf383c;
    background: none;   
}
    .nav ul ul {
        position: absolute;
        left: 10px;
        right: 0;
        display: none;
        z-index: 5; 
    }
    .nav ul ul li {
        position: relative;
        margin: 0;
        border: none;
    }
    .nav ul ul li a, .nav ul li:hover ul li a {
        width: 140px;
        display: block;
        background: #d0353e;
        color: #ffe597;
        font-size: 18px;
        margin: 6px 0 0 0;
        padding: 0;
        line-height: 26px;
        text-align: center;
        border-radius: 12px;
    }

    .nav ul ul li a:hover, .nav ul li:hover li a:hover {
        color: #fff;
    }

#content {
    width: 100%;
    float: left;
    border-top: 3px solid #fce696;
    margin: 20px 0 0 0; 
}
#content p {
    font-size: 14px;
    padding: 10px 0;    
}

クロムとサファリでそれを修正する方法を教えてください。

前もって感謝します

4

1 に答える 1

0

この問題を解決するには、幅を .nav > ul > li に設定する必要があります

.nav ul li:first-child, .nav ul li:last-child {
    width: 165px;
}

正常に動作しています http://demo.sumedhasoftech.com/manoj/test/test.html

于 2013-07-16T13:00:08.893 に答える