Html 在同一行上对齐元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1614071/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Aligning elements on same line
提问by markiz
I want both labels and textbox appear on same line ("Search for products:" label is above "search" label, i want them to be on the same line), the difference is slight but it exists, I want them to be precise.
我希望标签和文本框出现在同一行（“搜索产品：”标签在“搜索”标签上方，我希望它们在同一行上），差异很小但存在，我希望它们准确.
online version: link
在线版本： 链接
Markup:
标记：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div class="panel">
<div class="displayModes">
Search for products:
</div>
<div class="searchPanel">
Search :
<input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />
</div>
</div>
</body>
</html>
CSS:
CSS：
.displayModes
{
float:left;
padding-left: 2px;
text-align: center;
}
.searchPanel
{
float: right;
margin-right: 150px;
text-align: center;
}
.panel
{
font-family: Arial, Verdana, Sans-serif;
font-size: 12px;
padding-top:10px;
width:600px;
}
采纳答案by Ehz
Wrap all text in divs so you can add top padding so they all line up on the same line well. Always specify widths when floating. I find it easier to specify floats as all left and having specific widths.
将所有文本包裹在 div 中，以便您可以添加顶部填充，以便它们都很好地排列在同一行上。浮动时始终指定宽度。我发现将浮动指定为全部左侧并具有特定宽度更容易。
Markup
标记
<div class="panel">
<div class="displayModes">
Search for products:
</div>
<div class="searchPanel">
<div style="float:left;width:60px;padding-top:2px;">
Search :
</div>
<div style="float:left;width:100px;">
<input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />
</div>
</div>
</div>
CSS
CSS
.displayModes
{
float:left;
width:200px;
padding-top:2px;
padding-left: 2px;
text-align: center;
}
.searchPanel
{
float: left;
width:200px;
margin-right: 150px;
text-align: center;
}
.panel
{
font-family: Arial, Verdana, Sans-serif;
font-size: 12px;
padding-top:10px;
width:600px;
}
Update without extra divs for label centering
无需额外 div 即可更新标签居中
Markup
标记
<div class="panel">
<div class="displayModes">
Search for products:
</div>
<div class="searchPanel">
Search :
<input name="txtSearch" type="text" id="txtSearch" style="height:14px;"/>
</div>
</div>
CSS
CSS
.displayModes
{
float:left;
width:200px;
padding-top:4px;
padding-left: 2px;
text-align: center;
}
.searchPanel
{
float: left;
width:200px;
margin-right: 150px;
text-align: center;
}
.panel
{
font-family: Arial, Verdana, Sans-serif;
font-size: 12px;
padding-top:10px;
width:600px;
}
回答by BitDrink
just set up the line heigh of the div "displayModes" to 20px:
只需将 div "displayModes" 的行高设置为 20px：
<div class="panel">
<div class="displayModes">
Search for products:
</div>
<div class="searchPanel">
Search :
<input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />
</div>
</div>
CSS:
CSS：
.displayModes{
float:left;
padding-left: 2px;
text-align: center;
line-height: 20px;
}
.searchPanel{
float: right;
margin-right: 150px;
text-align: center;
}
.panel{
font-family: Arial, Verdana, Sans-serif;
font-size: 12px;
padding-top:10px;
width:500px;
}
Small suggestion: you have a problem of overflow, just add a "clearer" div to force the childs div to be contained from "panel":
小建议：你有溢出的问题，只需添加一个“更清晰”的div来强制从“面板”中包含孩子的div：
<div class="panel">
<div class="displayModes">
Search for products:
</div>
<div class="searchPanel">
Search :
<input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />
</div>
<div class="clearer"></div>
</div>
CSS:
CSS：
.clearer{ clear: both; }
FIX:The line-height, of the "displayModes" div, has to be 21px! Tested on FF 3.5.3 and Safari 4.0.3
修复：“displayModes”div 的行高必须是 21px！在 FF 3.5.3 和 Safari 4.0.3 上测试
回答by Buggabill
I did it by adding some padding to the following section of the CSS:
我通过向 CSS 的以下部分添加一些填充来做到这一点：
.displayModes
{
float:left;
padding-left: 2px;
padding-top: 2px;
text-align: center;
}
