0

我必须在浏览器的整个宽度上放置一个导航。

问题是当单击第一个项目时，该项目的整个浏览器宽度应该会受到影响。

这也是最后一项

为此，我刚刚使用了 nav first-child 和 nav last child。你可以在这里看到我的作品。

这在 Firefox 中运行良好。但是，在 chrome 中，如果我放大/缩小浏览器，导航项目会中断。

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;    
}

你能告诉我如何为 chrome 和 safari 解决这个问题。

提前致谢

4

1 回答 1

0

you need to set width to .nav > ul > li to fix this issue

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

its working fine http://demo.sumedhasoftech.com/manoj/test/test.html

于 2013-07-16T13:00:08.893 回答