html - 对齐 div 是并排的?
问题描述
我正在为一个旅游网站创建这个界面,我正在并排对齐两个输入,但它们没有正确对齐。我最关心的是出发和返回输入。Return 输入和标签未与出发输入和标签对齐。
有人可以检查我的代码并提出解决方案。这可能是我的愿景,但如果你能帮助我,我将不胜感激。
#container {
width: 400px;
height: 400px;
background-color: black;
float: left;
}
#menu {
background-color: black;
clear: both;
}
#flights {
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 50px;
color: white;
background-color: black;
float: left;
line-height: 50px;
text-align: center;
}
#flights:hover {
cursor: pointer;
background-color: gold;
color: black;
}
#hotels {
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 50px;
color: white;
background-color: black;
float: left;
line-height: 50px;
text-align: center;
}
#hotels:hover {
cursor: pointer;
background-color: gold;
color: black;
}
#cars {
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 50px;
color: white;
background-color: black;
float: left;
line-height: 50px;
text-align: center;
}
#cars:hover {
cursor: pointer;
background-color: gold;
color: black;
}
#bundle {
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 50px;
color: white;
background-color: black;
float: left;
line-height: 50px;
text-align: center;
}
#bundle:hover {
cursor: pointer;
background-color: gold;
color: black;
}
#flights-data {
font-family: helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: 400px;
height: 400px;
float: left;
margin-top: 0;
background-color: gold;
padding: 10px;
}
label {
width: 180px;
height: '';
float: left;
margin: 0;
padding: 0;
}
input#flight-departure {
display: inline-block;
width: 48%;
height: 50px;
padding: 10px;
float: left;
margin-right: 10px;
margin-top: 0;
display: block;
margin-bottom: 5px;
}
input#flight-return {
display: inline;
width: 48%;
height: 50px;
padding: 10px;
float: left;
margin-right: 0px;
margin-top: 0;
margin-bottom: 5px;
}
input#fly-from,
input#fly-to,
input#passengers {
display: block;
width: 380px;
height: 50px;
margin-bottom: 5px;
padding: 10px;
}
#depart-block {
column-count: 2;
column-gap: 10px;
width: 385px;
height: 100px;
padding: 0;
margin: 0;
float: left;
}
#find-a-flight {
width: 380px;
height: 50px;
line-height: 50px;
background-color: black;
color: white;
border-radius: 30px;
text-align: center;
margin-top: 10px;
}
#find-a-flight:hover {
cursor: pointer;
background-color: white;
border: 2px solid black;
color: black;
}
label#return {
margin: 0;
}
div.active#flights {
background-color: gold;
color: black;
}
<div id="container">
<div id="menu">
<div class="active" id="flights">Flights</div>
<div id="hotels">Hotels</div>
<div id="cars">Cars</div>
<div id="bundle">Bundle</div>
</div>
<div id="flights-data">
<label for="fly-from">Flying from</label><br>
<input type="text" id="fly-from" value="Departure city or Airport">
<label for="fly-to">Flying to</label><br>
<input type="text" id="fly-to" value="Departure city or Airport"><br>
<div id="departing-block">
<label for="Departure">Departing Flight</label><br>
<input type="text" id="flight-departure" value="Pick-a-date">
<label id="return" for="Return">Returning</label><br>
<input type="text" id="flight-return" value="Pick-a-date">
</div>
<label for="passengers">Passengers</label><br>
<input type="text" id="passengers" value="1 Adult 0 Children">
<div id="find-a-flight">Find a Flight</div>
</div>
解决方案
在 中进行以下更改<div id="flights-data">
:
<label for="fly-from">Flying from</label><br>
<input type="text" id="fly-from" value="Departure city or Airport">
<label for="fly-to">Flying to</label><br>
<input type="text" id="fly-to" value="Departure city or Airport"><br>
<div id="departing-block">
<div style="display: inline-block;">
<label for="Departure">Departing Flight</label><br>
<input type="text" id="flight-departure" value="Pick-a-date">
</div>
<div style="display: inline-block;">
<label id="return" for="Return">Returning</label><br>
<input type="text" id="flight-return" value="Pick-a-date">
</div>
</div>
<label for="passengers">Passengers</label><br>
<input type="text" id="passengers" value="1 Adult 0 Children">
<div id="find-a-flight">Find a Flight</div>
</div>
这将正确地并排对齐两个输入。我已经检查过了。
推荐阅读
- sql - 在雪花中按内部视图排序以创建唯一 ID
- xml - 为什么这个 IPS 插件给我一个注册错误?
- python - 替换列表中的字符
- python - 突出显示相邻图中的对应点
- bayesian - 具有二项式权重的高斯混合模型
- winapi - IMFSourceReader 硬件加速
- powershell - 如何从powershell中的字符串中取出字符串?
- google-data-studio - 计算字段 Data Studio 无效公式 - 输入表达式无效。- 解析 CASE 语句失败
- awk - 如何仅在点之后删除第一列中的所有内容?
- sql - 在 PostgreSQL 中,我在 1000 行上执行 UPSERT,我正在使用 ON CONFLICT ... DO NOTHING,如果 1 行失败,是否插入其他 999?