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 - 格式化水平导航栏

回答

相关问题