随着"nav"标签的出现,我正在重新审视导航栏的创建。有很多教程,但它们采用不同的方法,并使用过多的 css 来掩盖问题。
具体来说,我有一个 960 宽的内容区域,我想将导航按钮居中。
- "nav"元素是否有任何固有的css行为,或者它纯粹是一个语义容器?
- 如果我将按钮居中,那么我肯定不需要"浮动"它们吗?文本对齐,ul的中心应该可以解决问题。
- 如果我希望按钮比导航栏本身短,我应该给栏一个高度(使用线条高度让按钮居中)还是为按钮添加边距以向外(垂直)推动栏?
这里有几个例子的小提琴: http://jsfiddle.net/joplomacedo/ejSby/
"nav"元素是否有任何固有的css行为,或者它纯粹是一个语义容器?
nav
元素是一个纯粹的语义容器。就css而言,它的行为只不过是一个简单的块级元素,例如div
。
如果我将按钮居中,那么我肯定不需要"浮动"它们吗?文本对齐,ul的中心应该可以解决问题。
如果你正在使用ul
,就像你说的那样,那么你也需要li
。问题是li
有一个块的显示(实际上,不是块 - list-item
。在我们感兴趣的方式中,它们的行为就像块) - 当你想并排放置块级元素时,那么你总是需要float
它们,或者将它们的显示更改为inline
(inline-block
)。
浮动",要么是"内联阻塞"。出于多种原因,我倾向于使用"内联块技术" - 其中之一是,根据需要将块居中只是将文本对齐设置为以父元素为中心的问题。
如果我希望按钮比导航栏本身短,我应该给栏一个高度(使用线条高度让按钮居中)还是为按钮添加边距以向外(垂直)推动栏?
将padding-top
和bottom
添加到导航块似乎更简单,不是吗?
一次,这是小提琴:http://jsfiddle.net/joplomacedo/ejSby/