将不同标签与HTML/CSS中的下拉框对齐
我有一个菜单栏，看起来像这样： 我想要的是下拉框与标签右侧对齐。第一个（#Writers）是正确的，尽管它应该对齐得更高一点，因为现在它不是垂直居中的，但这不是问题所在 HTML:将不同标签与HTML/CSS中的下拉框对齐,html,css,Html,Css,我有一个菜单栏，看起来像这样： 我想要的是下拉框与标签右侧对齐。第一个（#Writers）是正确的，尽管它应该对齐得更高一点，因为现在它不是垂直居中的，但这不是问题所在 HTML: <html> <head> <link rel="stylesheet" type="text/css" href="css/layout.css"> </head> <body> <div c
<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>
.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;
}
您可以为每个包含标题的范围指定一个类，然后执行以下操作：
注意：我没有使用你的css，因为看起来你缺少了一些破坏它的东西。你必须设置
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>
.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;
}
看看上面代码的输出
这里是一个你能发布完整的HTML代码吗？或者，创建一个小提琴。。这将更好地帮助我们解决您的问题。我已经添加了整个HTML@TimothyPersoon这是你发布的代码：看起来有一些css丢失了是的，图像丢失了。它们位于my/var/www的文件夹中
.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;
}