我正在为一个旅游网站创建这个界面,我正在并排对齐两个输入,但它们没有正确对齐。我最关心的是出发和返回输入。返回输入和标签与出发输入和标签不对齐。
有人可以检查我的代码并提出解决方案吗?这可能是我的愿景,但如果你能帮助我,我将非常感激。
#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>
这将正确并排对齐两个输入。我查过了。