我试图制作一个导航栏并在旁边添加元素，但我不知道为什么另一个元素位于更高的位置，使导航栏向下移动。
就是这样
我需要做什么才能让导航栏保持在应该是的位置
并且有能力自由移动其他对象，所以我可以将它们放置在网站的中间，而不会出现问题
这是代码：
body{
margin: 0;
}
header{
background: #224fb1;
color: white;
display: flex;
justify-self: space-between;
align-items: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
}
#iconmenu{
margin-left: 25px;
margin-right: 25px;
}
.title{
display: flex;
justify-self: space-between;
align-items: center;
}
.titphp{
font-size: large;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#navbar{
background-color: #eeeeee;
border-radius: 5px;
/* height: 100vh; */
height: 860px;
width: 170px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
display: inline-block;
margin-top: 5px;
margin-right: 5px;
}
ul{
padding: 0;
text-decoration: none;
color: #444;
list-style: none;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#opcnav{
padding: 0;
background-color: white;
height: 25px;
margin: 5px;
border-radius: 5px;
}
#opcnav:hover{
background-color: #91B6E4;
font-weight: bold;
transition-duration: 0.2s;
}
#botnav{
text-decoration: none;
color: #444;
display: block;
}
#botnav:hover{
border-radius: 5px;
text-decoration: none;
color: #444;
background-color: #91B6E4;
color: white;
}
#datosalumno{
background-color: #eeeeee;
margin: 0px;
text-align: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
display: inline-block;
border-radius: 5px;
}
#fotoalumno{
margin: 10px;
/* border-radius: 10px; */
}
#calendar{
margin: 5px;
}
/* Parte del calendario */
#calendario{
border: 4px double black;
max-width: 536px;
background-color: #fffafa;
text-align: center;
display: inline-block;
}
#diasc{
border: 1px solid black;
border-collapse: separate;
border-spacing: 4px;
}
#diasc th, #diasc td {
font: normal 14pt arial;
width: 70px;
height: 30px;
}
#diasc th{
color: #990099;
background-color: #5ecdec;
}
#diasc td{
color: #492736;
background-color: #9bf5ff;
}
#fechaactual {
font: bold 12pt arial;
padding: 0.4em;
}
#fechaactual i {
cursor: pointer;
}
#fechaactual i:hover{
color: blue;
text-decoration: underline;
}
#buscafecha{
background-color: #663366;
color: #9bf5ff;
padding: 5px;
}
#buscafecha select, #buscafecha input {
background-color: #9bf5ff;
color: #990099;
font: bold 10pt arial;
}
#buscafecha [type=text]{
text-align: center;
}
#buscafecha [type=button]{
cursor: pointer;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="prac/calestilo.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="calendario.js"></script>
<title>Calendario 2.0</title>
</head>
<body>
<div class="cab">
<header>
<div>
<img src="prac/icons/hambu.png" alt="Menu" id="iconmenu"
height="40px"
>
</div>
<div>
<h1 class="title">Calendario</h1>
</div>
</header>
</div>
<div id="navbar">
<img src="prac/icons/logo_uni_2016.png" alt="Logo Uni"
height="50px">
<ul id="listnav" class="nav-menu">
<li id="opcnav"><a id="botnav" href="http://localhost/calendario/Prac/miinfo.html" title="Mi Perfil" target="blank"><img src="prac/icons/user.png" alt="Mi Información"
height="15px"> Mi Perifl</a>
<li id="opcnav"> <img src="prac/icons/asistencia.png" alt="Asistencia"
height="15px"> Asistencia
<li id="opcnav"><a id="botnav" href="http://localhost/calendario/Calendario.php" title="Calendario" target="blank" > <img src="prac/icons/calendar.png" alt="Calendario"
height="15px"> Calendario</a>
<li id="opcnav">En Proceso...
</ul>
</div>
<!-- Esta es la parte del calendario -->
<div id="calendario">
<div id="anterior" onclick="mesantes()"></div>
<div id="posterior" onclick="mesdespues()"></div>
<h2 id="titulos"></h2>
<table id="diasc">
<tr id="fila0"><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
<tr id="fila1"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila2"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila3"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila4"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila5"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila6"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<div id="fechaactual"><i onclick="actualizar()">HOY: </i></div>
<div id="buscafecha">
<form action="#" name="buscar">
<p>Buscar ... MES
<select name="buscames">
<option value="0">Enero</option>
<option value="1">Febrero</option>
<option value="2">Marzo</option>
<option value="3">Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</select>
... AÑO ...
<input type="text" name="buscaanno" maxlength="4" size="4" />
...
<input type="button" value="BUSCAR" onclick="mifecha()" />
</p>
</form>
</div>
</div>
</body>
</html>建议
在当今时代，我们有一些强大的东西，比如flex和grid来构建网站布局。因此，plz尝试使用display: flex;或display: grid;来代替display: inline-block;。
如何操作
只需将<nav id="navbar">和<div id="calendario">封装到<div>，并赋予其样式display: flex。然后就不需要display: inline-block;了，只需将其从两个子项中删除即可。通过height: fit-content;调整<div id="calendario">高度的另一个解决方案
body {
margin: 0;
}
header {
background: #224fb1;
color: white;
display: flex;
justify-self: space-between;
align-items: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
}
#iconmenu {
margin-left: 25px;
margin-right: 25px;
}
.title {
display: flex;
justify-self: space-between;
align-items: center;
}
.titphp {
font-size: large;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#navbar {
background-color: #eeeeee;
border-radius: 5px;
/* height: 100vh; */
height: 860px;
width: 170px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
/* display: inline-block; */
margin-top: 5px;
margin-right: 5px;
}
ul {
padding: 0;
text-decoration: none;
color: #444;
list-style: none;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
}
#opcnav {
padding: 0;
background-color: white;
height: 25px;
margin: 5px;
border-radius: 5px;
}
#opcnav:hover {
background-color: #91B6E4;
font-weight: bold;
transition-duration: 0.2s;
}
#botnav {
text-decoration: none;
color: #444;
display: block;
}
#botnav:hover {
border-radius: 5px;
text-decoration: none;
color: #444;
background-color: #91B6E4;
color: white;
}
#datosalumno {
background-color: #eeeeee;
margin: 0px;
text-align: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 1.12);
display: inline-block;
border-radius: 5px;
}
#fotoalumno {
margin: 10px;
/* border-radius: 10px; */
}
#calendar {
margin: 5px;
}
/* Parte del calendario */
#calendario {
border: 4px double black;
max-width: 536px;
background-color: #fffafa;
text-align: center;
/* display: inline-block; */
}
#diasc {
border: 1px solid black;
border-collapse: separate;
border-spacing: 4px;
}
#diasc th,
#diasc td {
font: normal 14pt arial;
width: 70px;
height: 30px;
}
#diasc th {
color: #990099;
background-color: #5ecdec;
}
#diasc td {
color: #492736;
background-color: #9bf5ff;
}
#fechaactual {
font: bold 12pt arial;
padding: 0.4em;
}
#fechaactual i {
cursor: pointer;
}
#fechaactual i:hover {
color: blue;
text-decoration: underline;
}
#buscafecha {
background-color: #663366;
color: #9bf5ff;
padding: 5px;
}
#buscafecha select,
#buscafecha input {
background-color: #9bf5ff;
color: #990099;
font: bold 10pt arial;
}
#buscafecha [type=text] {
text-align: center;
}
#buscafecha [type=button] {
cursor: pointer;
}
#main{
display: flex;
}
#calendario {
height: fit-content;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="prac/calestilo.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="calendario.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Calendario 2.0</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="cab">
<header>
<div>
<img src="prac/icons/hambu.png" alt="Menu" id="iconmenu" height="40px">
</div>
<div>
<h1 class="title">Calendario</h1>
</div>
</header>
</div>
<div id="main">
<div id="navbar">
<img src="prac/icons/logo_uni_2016.png" alt="Logo Uni" height="50px">
<ul id="listnav" class="nav-menu">
<li id="opcnav"><a id="botnav" href="http://localhost/calendario/Prac/miinfo.html" title="Mi Perfil"
target="blank"><img src="prac/icons/user.png" alt="Mi Información" height="15px"> Mi Perifl</a>
<li id="opcnav"> <img src="prac/icons/asistencia.png" alt="Asistencia" height="15px"> Asistencia
<li id="opcnav"><a id="botnav" href="http://localhost/calendario/Calendario.php" title="Calendario"
target="blank"> <img src="prac/icons/calendar.png" alt="Calendario" height="15px">
Calendario</a>
<li id="opcnav">En Proceso...
</ul>
</div>
<!-- Esta es la parte del calendario -->
<div id="calendario">
<div id="anterior" onclick="mesantes()"></div>
<div id="posterior" onclick="mesdespues()"></div>
<h2 id="titulos"></h2>
<table id="diasc">
<tr id="fila0">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr id="fila1">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="fila2">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="fila3">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="fila4">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="fila5">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="fila6">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="fechaactual"><i onclick="actualizar()">HOY: </i></div>
<div id="buscafecha">
<form action="#" name="buscar">
<p>Buscar ... MES
<select name="buscames">
<option value="0">Enero</option>
<option value="1">Febrero</option>
<option value="2">Marzo</option>
<option value="3">Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</select>
... AÑO ...
<input type="text" name="buscaanno" maxlength="4" size="4" />
...
<input type="button" value="BUSCAR" onclick="mifecha()" />
</p>
</form>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>