我有一个如下所示的菜单栏:
我想要的是下拉框在标签的右侧对齐。第一个 (#Writers) 是正确的，尽管它应该对齐得高一点，因为现在它不是垂直居中的，但这不是问题。
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<div class="horizontalNavigation">
<ul>
<li><a href="issue.html"><span>Issue</span></a></li>
<li><a href="series.html"><span>Series</span></a></li>
<li><a href="writer.html"><span>Writer</span></a></li>
<li><a href="editor.html"><span>Editor</span></a></li>
<li><a href="letterer.html"><span>Letterer</span></a></li>
<li><a href="colourist.html"><span>Colourist</span></a></li>
<li><a href="coverArtist.html"><span>Cover Artist</span></a></li>
<li><a href="inker.html"><span>Inker</span></a></li>
<li><a href="penciler.html"><span>Penciler</span></a></li>
<li><a href="tpb.html"><span>Trade Paper Back</span></a></li>
<li><a href="publisher.html"><span>Publisher</span></a></li>
</ul>
</div>
<div class="creditsbar">
<div class="creditsbarfields">
<form action="getInfo.php" method="get">
<label class="creditsbardropdown" for="writerName">
<span>#Writers:</span>
<form action="">
<select name="writer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="editorName">
<span>#Editors:</span>
<form action="">
<select name="editor">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="lettererName">
<span>#Letterer:</span>
<form action="">
<select name="letterer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="colouristName">
<span>#Colourist:</span>
<form action="">
<select name="colourist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="coverArtistName">
<span>#Cover Artist:</span>
<form action="">
<select name="coverArtist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="inkerName">
<span>#Inker:</span>
<form action="">
<select name="inker">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="pencilerName">
<span>#Penciler:</span>
<form action="">
<select name="penciler">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<form>
<input type="submit" value="Next">
</form>
</form>
</div>
</div>
<div class="issueInformationLayout">
</div>
</body>
</html>
CSS:
.creditsbar {
border: 5px solid;
border-radius: 25px;
width: 60%;
height: 5%;
margin: 1% 0% 0% 20%;
background-color: feedb4;
}
.creditsbarfields {
margin: 0% 0% 0% 2%;
width: 300%;
}
.creditsbardropdown {
float: left;
margin-right: 2%;
}
.horizontalNavigation {
background: url(../images/navigation.png) top left repeat-x;
border-radius: 75px;
height: 6%;
}
.horizontalNavigation * {
float: left;
}
.horizontalNavigation ul a {
margin: 5px 40px 0px 23px;
color: #578ba0;
font-size: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
.issueInformationLayout {
border: 5px solid;
border-radius: 25px;
border-color: #573700;
width: 50%;
height: 66%;
margin: 1% 0% 0% 25%;
background-color: feedb4;
overflow: hidden;
}
最佳答案
您必须为下拉列表设置 display:inline;:
HTML:
<div class="creditsbar">
<div class="creditsbarfields">
<form action="getInfo.php" method="get">
<label class="creditsbardropdown" for="writerName"> <span>#Writers:</span>
<form class="dropdownform" action="">
<select name="writer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="editorName"> <span>#Editors:</span>
<form class="dropdownform" action="">
<select name="editor">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="lettererName"> <span>#Letterer:</span>
<form class="dropdownform" action="">
<select name="letterer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="colouristName"> <span>#Colourist:</span>
<form class="dropdownform" action="">
<select name="colourist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="coverArtistName"> <span>#Cover Artist:</span>
<form class="dropdownform" action="">
<select name="coverArtist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="inkerName"> <span>#Inker:</span>
<form class="dropdownform" action="">
<select name="inker">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<label class="creditsbardropdown" for="pencilerName"> <span>#Penciler:</span>
<form class="dropdownform" action="">
<select name="penciler">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</label>
<form>
<input type="submit" value="Next" />
</form>
</form>
</div>
</div>
CSS:
.creditsbar {
border: 5px solid;
border-radius: 25px;
height: 5%;
}
.creditsbarfields {
margin: 0 0 0 2%;
width: 100%;
}
.creditsbardropdown {
float: left;
margin-right: 2%;
}
.dropdownform {
display:inline;
}
看看上面代码的输出 Here
这是一个 FIDDLE
关于html - 将不同的标签与 HTML/CSS 中的下拉框对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23290456/