html - 浮动不断创建不需要的空间
问题描述
我想在标题中包含一个搜索栏nav
。我过去常常float
只是让所有东西垂直居中,但是当我这样做时,它给了我一个非常大的空间,一直向下。我试图通过使用来修复它,width: 100%
但它给了我另一个空间:
我也尝试过height: 100%
,但没有奏效。
如何删除这个不需要的空间?我正在使用萨斯。
header {
margin: 0;
padding: 0;
background-color: #4A4C54;
nav {
min-height: 12vh;
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
margin: 0 auto;
padding: 0;
ul {
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0;
padding: 0;
li {
padding: 0 3rem;
font-size: 2rem;
a {
color: white;
}
}
}
h1 {
margin: 0;
padding: 0;
a {
color: white;
font-size: 3rem;
}
}
}
input {
margin: 0;
float: left;
position: relative;
bottom: 2.5rem;
padding: auto 1rem;
outline: none;
}
}
ul {
list-style: none;
}
html {
margin: 0;
padding: 0;
font-size: 62.5%;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
<header>
<nav>
<ul>
<li><a href="#">تسوق الآن</a></li>
<li><a href="#">تسوق الآن</a></li>
<li><a href="#">تسوق الآن</a></li>
</ul>
<h1><a href="/">لرم إبسوم</a></h1>
</nav>
<input type="search" placeholder="بحث..">
</header>
解决方案
您可以在页眉和导航中使用 flex。像这样的东西(你可以使用类似css2sass的东西将它转换回 sass ):
html {
margin: 0;
padding: 0;
font-size: 62.5%;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
header {
background-color: #4A4C54;
display: flex;
justify-content: space-between;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
}
nav a {
color: white;
}
input {
margin: 0;
padding: auto 1rem;
outline: none;
width: 120px;
}
ul {
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
font-size: 2rem;
white-space: nowrap;
padding: 0 1rem;
}
h1 {
margin: 0;
padding: 0;
text-align: center;
}
h1 a {
color: white;
font-size: 3rem;
}
<header>
<nav>
<ul>
<li><a href="#">تسوق الآن</a></li>
<li><a href="#">تسوق الآن</a></li>
<li><a href="#">تسوق الآن</a></li>
</ul>
<h1><a href="/">لرم إبسوم</a></h1>
</nav>
<input type="search" placeholder="بحث..">
</header>
推荐阅读
- java - 在 Spring Boot 自动配置阶段之前修改 TestExecutionListener 中的应用程序上下文
- node.js - 在 res.redirect() 中表达失败
- c# - Office 加载项清单 Visual Studio
- android - 警告:PKCS12 KeyStore 不支持不同的存储和密钥密码。忽略用户指定的 -keypass 值
- python - 如何通过 API Gateway 将输入(事件)参数传递到 Lambda
- php - Laravel 将数据从 Controller 传递到视图而不刷新
- python - 如何使 seaborn 散点图中的某些重叠数据点位于顶部
- javascript - Javascript对象和变量之间的关系
- reactjs - 如果我想从 api 调用 react 返回响应,我应该在返回中添加什么?
- python - 如何使用 Excel 文件将数据加载到 Service Now 以使用 Rest API Explorer 创建 RITM(请求项)?