html - 如何垂直对齐 元素？

Question

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

你能告诉我我应该怎么做才能移动那个<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>

My whole code

Answer 1

您可以将 vertical-align: top; 添加到您的 CSS 以将其应用于您的 input:

input {
    vertical-align: top;
}

这是一个例子:JSFiddle

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

---

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

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