导航栏的最小 css 是多少



随着"nav"标签的出现,我正在重新审视导航栏的创建。有很多教程,但它们采用不同的方法,并使用过多的 css 来掩盖问题。

具体来说,我有一个 960 宽的内容区域,我想将导航按钮居中。

  1. "nav"元素是否有任何固有的css行为,或者它纯粹是一个语义容器?
  2. 如果我将按钮居中,那么我肯定不需要"浮动"它们吗?文本对齐,ul的中心应该可以解决问题。
  3. 如果我希望按钮比导航栏本身短,我应该给栏一个高度(使用线条高度让按钮居中)还是为按钮添加边距以向外(垂直)推动栏?

这里有几个例子的小提琴: http://jsfiddle.net/joplomacedo/ejSby/

"nav"元素是否有任何固有的css行为,或者它纯粹是一个语义容器?

nav元素是一个纯粹的语义容器。就css而言,它的行为只不过是一个简单的块级元素,例如div

如果我将按钮居中,那么我肯定不需要"浮动"它们吗?文本对齐,ul的中心应该可以解决问题。

如果你正在使用ul,就像你说的那样,那么你也需要li。问题是li有一个块的显示(实际上,不是块 - list-item 。在我们感兴趣的方式中,它们的行为就像块) - 当你想并排放置块级元素时,那么你总是需要float它们,或者将它们的显示更改为inlineinline-block)。

要么是"

浮动",要么是"内联阻塞"。出于多种原因,我倾向于使用"内联块技术" - 其中之一是,根据需要将块居中只是将文本对齐设置为以父元素为中心的问题。

如果我希望按钮比导航栏本身短,我应该给栏一个高度(使用线条高度让按钮居中)还是为按钮添加边距以向外(垂直)推动栏?

padding-topbottom添加到导航块似乎更简单,不是吗?

所以,再

一次,这是小提琴:http://jsfiddle.net/joplomacedo/ejSby/

最新更新