我正在建立一个网站,我想让它更响应,目前我只需要使导航栏响应,但我有问题,特别是与quot;菜单"按钮,当我把屏幕变小时,"菜单"按钮在导航栏下面,有人能帮我吗?(如果你需要看到的网站,我已经把它放在Github页面:
https://eduardwildneto.github.io/ConversorDeUnidades/),
这是我的代码:
.navbar {
background: rgb(6, 0, 206);
color: rgb(0, 0, 0);
padding: 1px;
max-height: 55px;
margin-bottom: 10px;
position: sticky;
font-size: 20x;
z-index: 999;
top: 0px;
position: sticky;
}
.navbar ul {
list-style: none;
padding: 0;
}
.navbar ul li {
display: inline;
}
.navbar ul li a {
display: inline;
color: white;
text-decoration: none;
padding: 15px;
display: inline-block;
margin: auto;
}
#dominio-principal {
padding-left: 10%;
padding-right: 61%;
font-size: 18px;
}
#outros-dominios-1 {
float: left;
font-size: 15px;
}
#outros-dominios {
font-size: 15px;
padding-left: 1px;
}
/*.navbar {
background: rgb(6, 0, 206);
color: white;
font-size: 20px;
padding: 1%;
min-height: 65px;
}
.navbar ul {
list-style: none;
}
.navbar ul li {
display: inline;
}
.navbar ul li:last-child {
float: right;
margin-right: 4%;
}
.navbar ul li a {
color: white;
text-decoration: none;
}
#dominio-principal {
font-size: 18px;
position: absolute;
}
#outros-dominios-1 {
padding-left: 406px;
font-size: 15px;
}
#outros-dominios {
font-size: 15px;
padding-left: 1px;
}*/
/*Dropdown*/
.dropbtn {
background-color: rgb(6, 0, 206);
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
z-index: 999;
color: white;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background-color: rgb(6, 0, 206);
z-index: 999;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
z-index: 999;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(238, 238, 238);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
}
/* Links inside the dropdown */
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
z-index: 999;
color: black;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
z-index: 999;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
z-index: 999;
}
<header>
<nav class="navbar">
<ul>
<li><a href="" id="dominio-principal">Conversor de Unidades</a></li>
<div class="dropdown">
<button onclick="dropdown()" class="dropbtn">Menu</button>
<div id="myDropdown" class="dropdown-content">
<a href="index.html">Distância</a>
<a href="">Peso (Em construção)</a>
<a href="">Área (Em construção)</a>
<a href="">Volume (Em construção)</a>
<a href="">Temperatura (Em construção)</a>
<a href="">Tempo (Em construção)</a>
<a href="">Dados (Em construção)</a>
</div>
</div>
</ul>
</nav>
</header>
尝试使用flexx使导航栏响应。有关参考,请访问https://www.w3schools.com/css/css3_flexbox.asp
要开始使用Flexbox,首先需要定义一个flex容器。导航条ul 在css文件style.css:
你可以修改:
.navbar ul {
list-style: none;
padding: 0 10%; /*To adjust left & right navbar padding*/
display: flex;
justify-content: space-between; /*or space-around*/
}
之后,您可以更改子元素#dominio-principal:
#dominio-principal {
/*
padding-left: 10%;
padding-right: 61%;
*/
font-size: 18px;
}