Question

我想要一个导航栏（#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;
}

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

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

Answer 1

在display: inline-block

上尝试float: left或#nav div

Answer 2

display: inline-block样式规则可以解决问题，但它有一些缺点。有关详细信息，请参阅CSS display: inline-block: why it rocks, and why it sucks。

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

Answer 3

我建议您在外部#div使用clearfix解决方案。然后float:left所有#nav div个孩子。{/ p>

像图像一样安排div？

3 个答案: