Question

我要将浏览器放到浏览器的整个宽度上。

问题在于点击第一个项目，以及该项目的完整浏览器宽度。

这也适用于最后一项

要做到这一点，我刚刚使用导航的第一个孩子和导航最后一个孩子。你可以在here看到我的作品。

这在firefox上运行良好。但是，在chrome中，如果我放大/缩小brwoser，导航项将会中断。

HTML code：

<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的问题。

提前致谢

Answer 1

您需要将宽度设置为.nav＆gt; ul＆gt;李解决这个问题

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

工作正常 http://demo.sumedhasoftech.com/manoj/test/test.html

如何设置浏览器全宽导航？

1 个答案: