nav的背景顏色切換時變焦

大家好我是新的編碼，我需要在我的導航欄上有一點幫助我用我的css「white-space：nowrap;」以避免包裝在我的導航欄上，當我滾動到右後，在我的縮放頁面上的背景顏色被削減nav的背景顏色切換時變焦

你能幫我把背景顏色完整地向右？歡迎您致電或諮詢！謝謝

我的HTML

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8"> 
    <title>Conférence des directeurs des écoles doctorales de droit</title> 
    <link rel="stylesheet" href="css/master.css"> 
    </head> 
    <body> 
     <nav><ul> 
     <li><a href="#">Présentation</li> 
     <li><a href="#">Liste des ED</li> 
     <li><a href="#">Documents</li> 
     <li><a href="#">Liens</li> 
     <li><a href="#">Infomations/IP</li> 
     <li><input id=search-button type="submit" name="search_button"> 
      <input id=search-box type="text" name="search_box" placeholder="Rechercher..."></li> 
     </ul></nav> 

    </body> 
</html>

我的CSS

@font-face { 
    font-family: "Quicksand Light Regular"; 
    src: url('quicksand_light-webfont.woff'); 
} 

nav { 
    position: absolute; 
    background-color: darkred; 
    top: 0; 
    right: 0; 
    left: 0; 
    white-space: nowrap; 
    text-align: center; 
    max-width: 100%; 
    zoom: 1; 
} 

nav li { 
    font-family: "Quicksand Light Regular"; 
    font-weight: bold; 
    display: inline-block; 
    margin-right: 45px; 

} 

a { 
    color: white; 
    text-decoration: none; 
}

來源

2017-02-25 Cornos

將'nav'下的'max-width'增加到'100％'以補償'nav增加的'45px right-margin' li' – mike510a

也可能需要嘗試使用'overflow' css屬性 – mike510a

我把'max-width：330％;'同樣的問題，但是當我添加'overflow：auto;' 它工作，但滾動條正好在導航欄，而不是在頁面的底部 – Cornos

有人發現我的解決方案，我不得不刪除right : 0; 並添加min-width:100%; THX爲大家

nav { 
background-color: darkred; 
position: absolute; 
top: 0; 
left: 0; 
min-width: 100%; 
white-space: nowrap; 
text-align: center;

}

來源

2017-02-25 19:24:45 Cornos

只需在CSS規則中將max-width: 100%更改爲width: 100%即可nav

來源

2017-02-25 14:08:31 Johannes

這是「寬度：100％」我只是忘了把它放回，因爲我認爲最大寬度：100％將解決方案 – Cornos

而那doesn沒有幫助？你可以嘗試刪除「縮放：1」 - 它沒有多大意義... – Johannes

也嘗試添加'overflow-x：visible'到'nav' – Johannes

請嘗試使用靈活框代替。

使用ul和li變化下面以使用簡單div元素來創建flexboxes自動適應任何尺寸空間的示例（參見實施例）

EDIT

變更HTML：

刪除了UL和LI標籤
與<div id="menu">替換<UL>，並與剛剛<div>

列表改變CSS的替代<LI>屬性：

max-width: 100%改爲min-width: 100%
改名nav到#menu
增加了兩個新規則#menu（一個用於彈性盒，另一個只替換舊的nav規則）
從nav div div改名nav li規則nav div div規則
去除margin-right: 45px與margin-left和margin-right屬性替換它。

@font-face { 
 
    font-family: "Quicksand Light Regular"; 
 
    src: url('quicksand_light-webfont.woff'); 
 
} 
 

 
#menu { 
 
    position: absolute; 
 
    background-color: darkred; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
    zoom: 1; 
 
    min-width: 100%; // notice I changed max-width to min-width 
 
} 
 

 
#menu { 
 
    display: flex; 
 
    flex-direction: horizontal; 
 
    justify-content: space-between; 
 
    align-items: stretch; 
 
    flex-wrap: nowrap; 
 
} 
 

 
nav div div { 
 
    font-family: "Quicksand Light Regular"; 
 
    font-weight: bold; 
 
    margin-right: 15px; 
 
    margin-left: 15px; 
 
} 
 

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Conférence des directeurs des écoles doctorales de droit</title> 
 
    <link rel="stylesheet" href="css/master.css"> 
 
</head> 
 

 
<body> 
 
    <br> 
 
    <nav> 
 
    <div id="menu"> 
 
     <div><a href="#">Présentation</div> 
 
     <div><a href="#">Liste des ED</div> 
 
     <div><a href="#">Documents</div> 
 
     <div><a href="#">Liens</div> 
 
     <div><a href="#">Infomations/IP</div> 
 
     <div><input id=search-button type="submit" name="search_button"> 
 
      <input id=search-box type="text" name="search_box" placeholder="Rechercher..."></div> 
 
     </div></nav> 
 

 
    </body> 
 
</html>

來源

2017-02-25 14:35:45 mike510a

看完整頁面視圖後點擊**運行片段** – mike510a

flex的想法非常有趣，我從中學到了，所以謝謝！這個想法是，我有這個問題的主要原因是因爲我想我的導航在一行我更喜歡在另一個部分使用柔性盒 – Cornos

只是將'flex-wrap：wrap'更改爲'flex-wrap：nowrap' – mike510a

謝謝@ mike510a，但我想找到問題的解決方案，因此我能面對它而不是findink替代女巫真的有用：取例如：

> <!DOCTYPE html> <html> <head> 
>  <meta charset="utf-8"> 
>  <title>Test</title> 
>  <link rel="stylesheet" href="css.css"> </head> <body> 
>  <nav> 
>  <ul> 
>   <li>test1</li> 
>   <li>test2</li> 
>   <li>test3</li> 
>   <li>test4</li> 
>   <li>test5</li> 
>   <li>test6</li> 
>   <li>test7</li> 
>   <li>test8</li> 
>   <li>test9</li> 
>   <li>test10</li> 
>  </ul> 
>  </nav> 
> 
> </body> </html>

而cs S：

> nav { position: absolute; background-color: blue; width: 100%; 
> text-align: center; white-space: nowrap; } li { display: 
> inline-block; }

我有同樣的問題...

來源

2017-02-25 15:19:01 Cornos

nav的背景顏色切換時變焦

回答

相關問題