html - 制作一个所有内容垂直对齐的 CSS 标题

Question

我刚接触 CSS，需要一些帮助。

我目前正在制作一个网站，其中一个标题的顶部宽度为 100%，其内容遵循 960grid 系统。

到目前为止，HTML 和 CSS 是我的做法:

<div id="header">
<div id="header-inner">
/logo/
/nav/
/search/
</div>
</div>

和CSS:

#header { background: red; }
#header-inner { margin: auto; padding: 25px 0; width: 940px; }

我在 header-inner 上使用了 clear-fix，一切正常。通过将 Logo 作为 IMG 插入，它会确保 Logo 的顶部和底部之间有 25 像素的空间，这样“定义”了页眉的高度。

即使在将导航作为 UL/LI 元素插入之后，它仍然可以正常工作，但是后来当我添加搜索输入时，一切都搞砸了。表单标签似乎在输入周围给了它一个不可见的边框，使其使用比“需要”更多的高度。

搜索输入也更大了，显然形成了一个新的高度。

我只是想知道是否有一种聪明有效的方法来制作标题？无需从 header-inner 中删除填充，也不必在 header-inner parent 中的每个元素上定义 padding-top 和 bottom

Answer 1

你可以通过列表来做到这一点

<ul>
  <li>logo</li>
  <li>nav</li>
  <li>search</li>
</ul>

可以设置li的宽度