html - 如何将div放在中间?
问题描述
在这个 HTML 中,顶部是导航栏,底部是输入字段。如何将另一个 div 放置在这两个完美契合而不会重叠的中间?
#aha {
position: absolute;
bottom: 5px;
left: 5px;
font-size: 1.5rem;
width: 60%;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="home.css">
<title>Document</title>
</head>
<body>
<!-- <input type="text" placeholder="Passwords"> -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<input id="aha" type="text" placeholder="Enter text here . . .">
<script src="home.js"></script>
</body>
</html>
解决方案
推荐阅读
- c - 如何使用 c api 在 LLVM IR 中读取/写入数组中的值?
- google-fit - 如何通过授权过程在 React 本机应用程序中添加 Google Fit
- mysql - 如何在 MySQL 命令中使用变量而不是查询
- python - 如何使用 python office365 模块将文件夹及其内容复制到 SharePoint Online 中的新位置
- jenkins - Jenkins 在阶段单元格/框中添加其他信息,而不仅仅是默认构建持续时间
- kubernetes - 访问路由器后面集群的 microk8s API
- pyspark - 对于 pyspark 数据帧,如何在一组 2 个有序列上添加行索引,以便为每个组重新启动行索引?
- python - 在 Abaqus 脚本中使用 Scipy
- charts - ChartJS 如何设置 x 轴刻度
- android - 添加新联系人时颤动contacts_service问题