1

我想要一个导航栏（#nav），并且每个导航项都是一个 div（#nav div）。然而，这并不好。这是我正在尝试的：

#nav {
    background: url("navbg.png"); /* navbg.png is 1x40 pixels */
    height: 40px;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
}
#nav div {
    width: 200px;
    height: 40px;
    background: url("Selected.png"); /* Selected.png is 200x40 pixels */
    text-align: center;
}

当我使用 div 中的两个 div 执行此操作时#nav，一个显示在左侧，一个显示在下方。当我这样做时，但使用display: inline;in 时#nav div，它居中，但 div 没有任何背景，并且两个 div 中的文本并排显示。

我希望 div 像图像一样工作，受到影响text-align: center;并并排显示。

4

3 回答 3

2

尝试display: inline-block或float: left继续#nav div

于 2012-12-21T15:54:33.370 回答
2

样式规则可以解决问题，display: inline-block但它有一些缺点。请参阅CSS display: inline-block: 为什么它会摇摆不定，以及为什么它很烂，以了解更多详细信息。

我可能还建议使用列表而不是 div 作为导航元素。这是一种常见的策略，可以（希望）产生更清晰的标记。

于 2012-12-21T15:55:16.863 回答
2

我建议在您的外部 div 上使用clearfix#div解决方案。然后float:left对所有的#nav div孩子。

于 2012-12-21T15:57:45.863 回答