簡單的CSS。水平菜單在位置固定時不保留其長度：固定

我在我的第一個HTML和CSS項目中，代碼有自己的想法！簡單的CSS。水平菜單在位置固定時不保留其長度：固定

所以...我做了一個水平菜單。它顯示非常酷，整個頁面寬度的背景顏色。

但是，當我想使其位置：固定，以便它在頁面上停留時寬度很小時，背景顏色會從寬度中消失。

的HTML：

<div class="nav"> 
 
\t <ul> 
 
\t \t <li class="selected"><a href="tema.html">Job Description Details</a></li> 
 
\t \t <li><a href="">Audit Trail</a></li> 
 
\t \t <li><a href="">Files</a></li> 
 
\t </ul> 
 
\t </div>

沒有固定的位置，它的偉大工程的CSS。

.nav { 
 
    background-color: #488AC7; 
 
\t margin:   none; 
 
} 
 

 
.nav ul { 
 
\t margin:   0px; 
 
\t list-style-type: none; 
 
\t padding:   5px 0px 5px 0px; 
 
} 
 

 

 
.nav ul li { 
 
\t display:   inline; 
 
\t padding:   5px 10px 5px 10px; 
 
} 
 
.nav ul li a:link, .nav ul li a:visited { 
 
\t color:    #F0FFFF; 
 
\t border-bottom:  none; 
 
\t font-weight:  bold; 
 
} 
 

 
.nav ul li.selected { 
 
    background-color: #F0FFFF; 
 
    border-bottom:  none; 
 
} 
 

 
.nav ul li.selected a:link, .nav ul li.selected a:visited { 
 
    color:    #488AC7; 
 
}

和CSS代碼，使顏色消失：

.nav ul { 
 
\t margin:   0px; 
 
\t list-style-type: none; 
 
\t padding:   5px 0px 5px 0px; 
 
    position: fixed; 
 
    margin-left: 0px; 
 
}

來源

2016-01-24 EmmaZ

你想與固定的位置來完成什麼？你可以將它應用到導航類而不是ul，它會使它修復。也可以使用top，left來確定頁面的位置 – ClearBoth

我試過將它應用到導航類，但它是相同的結果 - 背景顏色停止去完整的寬度，只粘貼到實際的名稱寬度。範圍是......呃......家庭作業要求表明它需要修復。因此，當滾動到正確的位置時，它會粘在頁面上。 – EmmaZ

你需要提供一個寬度的導航https://jsfiddle.net/2j8s8xfz/ – prakashchhetri

試試這個...這將工作時的位置是fixed

.nav { 
    background-color: #488AC7; 
    margin: none; 
    width:100%; 
    position:fixed; 
}

修復yor .nav不是ul。如果你想嘗試這個完整的代碼，只需複製和paste.then運行

<html> 

    <head> 
     <title></title> 
    </head> 

    <style type="text/css"> 

    body{ 
     margin: 0; 
     padding: 0; 

    } 

    div.mynavbar{ 
     text-align: center; 
     padding: 1%; 
     background-color: black; 
     position: fixed; 
     width: 100%; 

    } 

    ul li{ 
     list-style-type: none; 
     display: inline; 
     width: auto; 
     margin: 5%; 


    } 

    ul li a{ 
     text-decoration: none; 
     font-family: helvetica; 
     font-size: 20px; 
     color:white; 
    } 

    ul li a:hover{ 
     color: red; 
    } 

    </style> 


    <body> 

    <div class="mynavbar"> 
     <ul> 
      <li class="selected"><a href="tema.html">Job Description Details</a></li> 
      <li><a href="">Audit Trail</a></li> 
      <li><a href="">Files</a></li> 
      </ul> 
    </div> 

    </body> 
    </html>

來源

2016-01-24 09:23:24

謝謝格雷厄姆！哇，這裏有這麼多有幫助的人..感謝每一個答案。 – EmmaZ

祝你好運，最好接受一個污水。 –

我已經點擊了向上箭頭，當然，但是它說我在公開之前需要15以上的聲望。在我的心中，它是公開的:) – EmmaZ

position:fixed;應該固定元素相對於視口的位置，無論滾動。所以你將不得不爲元素提供一個寬度。

查看整個工作代碼在https://jsfiddle.net/2j8s8xfz/1/

body{ 
 
    min-height:900px; 
 
} 
 
.nav { 
 
    background-color: #488AC7; 
 
\t margin:   none; 
 
    position:fixed; 
 
    width:100%; 
 
} 
 

 
.nav ul { 
 
\t margin:   0px; 
 
\t list-style-type: none; 
 
\t padding:   5px 0px 5px 0px; 
 
} 
 

 

 
.nav ul li { 
 
\t display:   inline; 
 
\t padding:   5px 10px 5px 10px; 
 
} 
 
.nav ul li a:link, .nav ul li a:visited { 
 
\t color:    #F0FFFF; 
 
\t border-bottom:  none; 
 
\t font-weight:  bold; 
 
} 
 

 
.nav ul li.selected { 
 
    background-color: #F0FFFF; 
 
    border-bottom:  none; 
 
} 
 

 
.nav ul li.selected a:link, .nav ul li.selected a:visited { 
 
    color:    #488AC7; 
 
}

<body> 
 
    <div class="nav"> 
 
\t <ul> 
 
\t \t <li class="selected"><a href="tema.html">Job Description Details</a></li> 
 
\t \t <li><a href="">Audit Trail</a></li> 
 
\t \t <li><a href="">Files</a></li> 
 
\t </ul> 
 
\t </div> 
 
</body>

來源

2016-01-24 09:27:33 prakashchhetri

勝利！有用！ – EmmaZ

@EmmaZ如果有效，請接受答案。歡呼:) – prakashchhetri

你的意思是點擊向上箭頭？或在'檢查'上，無論名字是什麼，在向下箭頭下方？ – EmmaZ

更新導航定位類：

.nav { 
    background-color:#488AC7; 
    margin:none 
    position:fixed; 
    width:100%; 
    top:0; 
}

來源

2016-01-24 09:27:54 ClearBoth

寬度：100％。我已經知道了，但我不能相信我已經忘記了！非常感謝，ClearBoth！ – EmmaZ

一dd只有寬度：100％;到UL你會得到的背景顏色在頁面的整個寬度

.nav ul { 
 
\t margin:   0px; 
 
\t list-style-type: none; 
 
\t padding:   5px 0px 5px 0px; 
 
    position: fixed; 
 
    margin-left: 0px; 
 
    width: 100%; 
 
}

來源

2016-01-24 09:47:21

簡單的CSS。水平菜單在位置固定時不保留其長度：固定

回答

相關問題