Question

我正在尝试设计一个居中的导航菜单，该菜单位于跨越屏幕宽度100％的div内。我有一个名为navigation的父div中的导航div，并且父div位于导航容器中。我觉得有必要在这个100％宽度的父div中有一个居中的导航。

问题是我没有运气让父div使用我给navItem div的适当填充进行扩展。对不起，如果这有点令人困惑，感谢您提出的任何建议。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            MC Machine Test
        </title>
        <link rel="stylesheet" href="main.css" type="text/css">
    </head>
<body>
    <div class="top">
    </div>
    <div class="navContainer">
        <div class="navigation">
            <div class="navItem">Home</div>
            <div class="navItem">Products</div>
            <div class="navItem">Facility</div>
            <div class="navItem">Photo Gallery</div>
            <div class="navItem">Request a Quote</div>
            <div class="navItem">Contact Us</div>
        </div>
    </div>
    <div class="mainSection">
    </div>
</body>
</html>

这是CSS。

.navContainer
{
    width:100%;
    background-color:#ffffff;
    color:#333333;
    border-bottom:solid 1px #333333;
}

.navigation
{
    border:0px 1px 1px 0px solid #333333;
    width:680px;
    margin-left:auto;
    margin-right:auto;
}
.navItem
{
    padding:20px;
    border-right:1px solid #cccccc;
    display:inline;
}

Answer 1

不要使用DIV来构建菜单。使用样式化的无序列表。

请参阅：I love lists。

Answer 2

我可能会在这里弄错，但我认为你不能在内联元素中添加顶部/底部填充。如果我理解你想要正确做什么，你可以将显示定义为块并使用浮动使它们彼此相邻而不是彼此相对。

.navItem
{
    padding:20px;
    border-right:1px solid #cccccc;
    display:block;
    float:left;
}

导航/填充/父母分区

2 个答案: