如何垂直对齐<form>元素？

Question

我试图从2003年开始将Google的搜索网站副本作为HTML练习，但我遇到了一个问题。我终于设法在输入字段旁边创建了一个无序列表，但我不希望该文本输入与列表的最后一项一起移动，如下所示：

你能否告诉我我应该做些什么才能将<input>字段移到＆＃34;高级搜索＆＃34;？

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

My whole code

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;添加到input，将其添加到您的CSS中：

input {
    vertical-align: top;
}

以下是一个例子：JSFiddle

inline-block元素将与其容器的底部对齐，因为vertical-align的默认值为baseline。通过改为应用vertical-align: top，元素将与其容器的顶部对齐。

我现在意识到将这个问题标记为重复可能是一个更好的决定。您的问题与此处的问题几乎相同：Align inline-block DIV's to top of container element

请考虑阅读本文以获得更详细的解释。