如何設置瀏覽器全寬度導航？

問題是，當點擊第一個項目，一起到該項目的整個瀏覽器的寬度shoild進行。

這也是最後一個項目

爲了做到這一點，我剛剛與導航第一胎和NAV最後一個孩子的工作。你可以在here看到我的工作。

這適用於firefox。但是，在Chrome中，如果我放大/縮小brwoser，那麼導航項會打破。

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。

在此先感謝

來源

2013-07-16 user1896653

我不能完全肯定你試圖從描述中實現，但嘗試將您的像素更改爲百分比。如果您希望元素保持相對於彼此的位置，則需要使用相對度量單位，否則當您調整大小時，佈局會中斷。 – mcbex

li似乎在Chrome中發生衝突。我建議在www.jsfiddle.net進行測試，看看它是否也在Chrome中以這種方式工作。 – designtocode

您需要設置寬度.nav> ul>李來解決這個問題

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

其做工精細 http://demo.sumedhasoftech.com/manoj/test/test.html

來源

2013-07-16 13:00:08

我認爲，這不是妄想。我在導航欄中設置了寬度。這顯示了不同的結果在Firefox和鉻 – user1896653

我設置寬度在導航欄。這就是爲什麼，這是行不通的。您將寬度設置爲 navi li：first-child and nav ul li：last-child。它工作正常。非常感謝 – user1896653

如何設置瀏覽器全寬度導航？

回答

相關問題