如何對齊 <form> 垂直的元素？

Question

我正在嘗試從2003年開始以HTML練習的形式復制Google的搜索網站，但遇到了問題。 我終於設法在輸入字段旁邊創建了一個無序列表，但是我不希望該文本輸入與列表的最后一項一起移動，如下所示：

您能告訴我我該怎么做才能將<input>字段移到“高級搜索”旁邊嗎？

這是我的代碼：

 ul { text-align: left; font-size: 12px; margin: 0px auto; display: inline-block; } 

 <form action="http://www.google.com/search" method="get"> <div style="text-align:center"> <input type="text" name="q" placeholder="Search on Google" style="width: 380px" > <ul> <li>Advanced search</li> <li>Preferences</li> <li>Language tools</li> </ul> </div> </form> 

我的整個代碼

Answer 1

你好，你可以簡單地通過添加額外的CSS來做到這一點

 float:right;
 margin-top:auto;

參見下文，希望對您有所幫助。

 ul { text-align: left; font-size: 12px; float:right; display: inline-block; margin-top:auto; } 

 <form action="http://www.google.com/search" method="get"> <div style="text-align:center"> <input type="text" name="q" placeholder="Search on Google" style="width: 380px" > <ul> <li>Advanced search</li> <li>Preferences</li> <li>Language tools</li> </ul> </div> </form> 

Answer 2

您可以應用vertical-align: top; 通過將其添加到您的CSS中來input ：

input {
    vertical-align: top;
}

這是一個示例： JSFiddle

inline-block元素將與其容器的底部對齊，因為vertical-align的默認值為baseline 。 通過改為應用vertical-align: top ，元素將使其自身與其容器的頂部對齊。

---

我意識到現在將這個問題標記為重復可能是一個更好的決定。 您的問題與此處看到的問題幾乎相同： 將內聯塊DIV對齊到容器元素的頂部

考慮閱讀此內容以獲得更詳細的說明。