在同一行上对齐元素

我希望标签和文本框都出现在同一行（“搜索产品：”标签位于“搜索”标签上方，我希望它们位于同一行上），但差异很小存在，我希望他们是精确的。在同一行上对齐元素

在线版本：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; 
}

来源

2009-10-23 markiz

在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; 
}

来源

2009-10-23 15:33:38 Ehz

我不能同时在一个div内同时使用“搜索”标签和文本框吗？ – markiz 2009-10-23 15:50:35

是的，你可以。只是我不喜欢浏览器给出的输入和文本之间的默认垂直对齐方式。在第一个例子中，文本看起来略低于输入的垂直中心。但是当你将它们放在单独的div中时，你可以使它们更好地排队。 – Ehz 2009-10-23 16:28:21

你能否把你的答案加入代码（带有额外div的代码）？我会接受你的回答。 – markiz 2009-10-23 16:38:40

我做到了通过添加一些填充到CSS的以下部分：

.displayModes 
{ 
    float:left; 
    padding-left: 2px; 
    padding-top: 2px; 
    text-align: center; 
}

来源

2009-10-23 15:27:55 Buggabill

这没有帮助。他们仍然没有对齐。 – markiz 2009-10-23 15:46:41

刚刚成立的格 “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来强制儿童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：

.clearer{ clear: both; }

FIX： 行高时， “displayModes” 分区，已被21px！测试FF 3.5.3和Safari 4.0.3

来源

2009-10-23 15:51:05 BitDrink

你能解释一下你的意思是“溢出问题”吗？ divs似乎显示正常... – markiz 2009-10-23 15:59:30

顺便说一句，你的解决方案没有帮助，元素仍然没有对齐。 – markiz 2009-10-23 16:02:45

在IE上我不知道，但是在FF和Safari中它工作正常！ Div“面板”没有固定的高度，所以，当你浮动div“displayModes”和div“searchPanel”时，它们会超出div父区的面积......所以它们溢出了div容器！即使浏览器显示全部正常，它们实际上并不包含在div“面板”中...尝试为div“面板”设置背景颜色，您将看到我的意思！ – BitDrink 2009-10-23 17:42:40

在同一行上对齐元素

回答

相关问题