HTML - 格式化水平導航欄

我很難格式化導航欄。我希望寬度是固定的大小，並且塊的尺寸要適當。我可以通過調整CSS文件中的填充大小來解決這個問題，但當網頁顯示在各種大小的計算機屏幕上時，它將不具有標準大小。需要幫助。HTML - 格式化水平導航欄

body { 
 
    background-color: linen; 
 
    margin: 0; 
 
} 
 

 

 
/*Strip the ul of padding and list styling*/ 
 

 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 

 
/*Create a horizontal list with spacing*/ 
 

 
ul.topnav li { 
 
    float: left; 
 
} 
 

 
ul.topnav li a, 
 
.dropbtn { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 20px 200px; 
 
    text-decoration: none; 
 
} 
 

 
ul.topnav li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
ul.topnav li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
ul.topnav .dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
} 
 

 
ul.topnav .dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
ul.topnav .dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
ul.topnav .dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<!--Importing CSS file--> 
 

 
<head> 
 
    <link rel="stylesheet" href="home.css"> 
 
</head> 
 
<!--End of import--> 
 

 
<body> 
 

 
    <ul class="topnav"> 
 
    <li><a class="active" href="home.html">Home</a></li> 
 
    <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn">VCT Operation</a> 
 
     <div class="dropdown-content"> 
 
     <a href="mainFrame.asp">Conduct Operation</a> 
 
     <a href="report.asp">View Reports</a> 
 
     </div> 
 
    </li> 
 
    <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 

 
</body> 
 

 
</html>

來源

2017-09-06 cerberus99

什麼**的**預期顯示是什麼樣子？「恰當地使用相同尺寸*」和「*標準尺寸*」的陳述都相當模糊。你想鏈接集中嗎？你想要突出顯示佔據整個寬度嗎？ VCT操作的下拉菜單怎麼樣？請更新您的問題，以指定**完全**您希望顯示器的樣子。 –

使用'ul.topnav li {寬度：33.3％;寬度：33.3％}。 }' –

@ObsidianAge Hi，Obi。我想說的是關於導航欄本身，我無法將其作爲「固定寬度尺寸」，我可以將其尺寸適合於具有不同尺寸的電腦屏幕。 – cerberus99

我添加了一個display:flex到ul.topnav，但一定要使用媒體查詢，所以你可以按照你想要的分辨率顯示。之所以爲此添加display:flex是因爲我可以將它們排列在一列中。

@media (max-width:760px) { 
    ul.topnav { 
    display: flex; 
    flex-direction: column; 
    }

}

您還可以添加一個width和另一padding到ul.topnav li a，讓每一位a具有相同的寬度。

@media (max-width:760px) { 
    ul.topnav li a { 
    width: 46%; 
    padding:20px 20px 20px 103px; 
    text-align: left; 
    } 
}

例子：（更改分辨率設置爲760px）

https://jsfiddle.net/fzy7cysf/1/

來源

2017-09-06 06:06:04

謝謝一幫人。它與響應完美配合，但「靈活方向」似乎沒有反應。此外，我可否請知道如何在導航欄上標準化每個列的大小。尺寸似乎不一樣。 – cerberus99

當你走到760px以下時，尺寸是一樣的，因爲這就是我所做的。如果您希望每個分辨率的大小相同，則可以使用「媒體」查詢製作多個斷點 –

在a標籤移除填充添加width:100%和padding 10px 0 :李寬度爲'33 0.3％`

ul.topnav li { width:33.3%;} 
ul.topnav li a { display:inline-block; width:100%; padding:12px 0;}

來源

2017-09-06 05:47:52

HTML - 格式化水平導航欄

回答

相關問題