我希望标签和文本框都显示在同一行(“搜索产品:”标签位于“搜索”标签上方,我希望它们位于同一行),差异很小但是它存在,我想要它们确切地说。
在线版:link
标记:
<!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:
.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;
}
答案 0 :(得分:2)
将div中的所有文本换行,这样就可以添加顶部填充,这样它们就可以很好地排列在同一条线上。浮动时始终指定宽度。我发现将浮动指定为所有左边并具有特定宽度更容易。
标记
<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
.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;
}
更新标签中心没有额外的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>
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;
}
答案 1 :(得分:0)
我是通过在CSS的以下部分添加一些填充来实现的:
.displayModes
{
float:left;
padding-left: 2px;
padding-top: 2px;
text-align: center;
}
答案 2 :(得分:0)
只需将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:
.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;
}
小建议:你有一个溢出问题,只需添加一个“更清晰”的div来强制childs div来自“panel”:
<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:
.clearer{ clear: both; }
<强> FIX:强> “displayModes”div的行高必须为21px!在FF 3.5.3和Safari 4.0.3上测试