导航栏的最小css是多少?

时间:2012-07-07 02:04:24

标签: css navigationbar

随着'nav'标签的出现,我正在重新审视创建导航栏。有许多教程,但他们采用不同的方法,并用太多的CSS来解决这个问题。

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

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

1 个答案:

答案 0 :(得分:1)

以下是一些小例子:http://jsfiddle.net/joplomacedo/ejSby/

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

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

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

如果你使用ul,就像你说的那样,那么你也需要li。问题是li有一个块的显示(实际上,不是阻塞 - list-item。在我们感兴趣的方式中,它们表现得像块一样) - 当你想要阻塞时级别元素并排,然后您将始终需要float,或将其显示更改为inlineinline-block)。

'浮动'或'内嵌阻止'。我倾向于使用“内联块技术”有很多原因 - 其中一个原因是,根据需要将块居中,只需将text-align设置为父元素的中心。

如果我希望按钮比导航栏本身短,我应该给条形高度(使用按钮的行高来居中)或者为按钮添加边距以推动条形向外(垂直)?

添加padding-top&导航区bottom,不是吗?

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