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

Question

我正在尝试复制 Google 2003 年的搜索站点作为 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，从而将 vertical-align: top; 应用到您的 input：

input {
    vertical-align: top;
}

举个例子：JSFiddle

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

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

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

Answer 2

你好，你可以简单地通过添加额外的 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>

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

How to align <form> elements vertically?

html

css

forms

element