制作一个垂直对齐所有内容的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; }

我在标题内部使用了一个明确的修复程序，一切正常。通过将徽标作为IMG插入，它确保徽标的顶部和底部之间有25px的空间，这样就可以“定义”标题的高度。

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

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

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

Answer 1

你可以通过列表

来做到这一点

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

你可以设置li的宽度