在同一行上對齊元素

我希望標籤和文本框都出現在同一行（「搜索產品：」標籤位於「搜索」標籤上方，我希望它們位於同一行上），但差異很小存在，我希望他們是精確的。在同一行上對齊元素

在線版本：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

在同一行上對齊元素

回答

相關問題