Question

我是这个编码的新手，所以请放轻松我;）

我试图让这个网站上的顶级导航按照我所理解的宽度来容纳＆＃34;容器＆＃34;该网站的宽度为900px。我不能为我的生活删除导航左侧和右侧的填充或边距。请参阅下面的代码。

网站截图：http://img560.imageshack.us/img560/9479/237c.png

现在我只是巧妙地调整填充以使导航器在页面上稍微居中，但最终如果它像其他所有东西一样遇到包含边缘会更好看。

感谢您的帮助。

/* Navigation
--------------------------------------------------------------------------------*/


#topnav {
    clear: both;
    margin: 0 0;
    overflow: hidden;
}

#topnav ul {
    list-style: none;
    float: left;
    text-align: center;
}

#topnav ul li {
    list-style: none;
    float: left;
    background: url(nav-sep.png) right 0px no-repeat;
    padding: 15px 0px 12px 0px;
    display: inline block;
}

#topnav ul > li:last-child,
#topnav ul > span:last-child li {
    background: none;
    padding-right: 0;
}

#topnav a {
    float: left;
    display: block;
    color: #545454;
    font-family: Blair, sans-serif;
    font-weight: 500;
    padding: 6px 0 6px;
    border: 0;
    border-top: 3px solid transparent;
    outline: 0;
    margin: 0 16.6px;
    list-style-type: none;
    font-size: .75em;
    text-transform: uppercase;
}

#topnav ul > li:last-child a,
#topnav ul > span:last-child li a {
    margin-right: 0;
}

#topnav li#active a,
#topnav a:hover {
    color: #666666;
    border: 0;
    border-top: 3px solid #8cc640;
}

Answer 1

尝试

    margin-left:auto;
    margin-right:auto;

另见：

Cross browser method to fit a child div to its parent's width

希望这有帮助。欢呼声。

Answer 2

我想说要添加一个主容器div，它将包含你现有的所有html，然后用margin-left / right定义一个css为auto：

    <head>
    .......
    <style>
    #mainContainer {
      margin-left: auto;
      margin-right: auto;
    }
    </style>
    </head>    
    <html>
    <body>
    <div id="mainContainer">
    ............................
    ............................
    ............................
    </div>
    </body>
    </html>

Answer 3

嗨，如果您是新手，您需要知道默认情况下，ul，p或body等所有元素标签都默认为{{1}等属性上的某些值}和margin。您需要的是首先在CSS中重置这些值以避免问题并使您的切割更容易。在您的情况下，padding有一些属性：

ul

您可以使用ul { display: block; list-style-type: disc; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px; }这个简单的全局重置作为全局选择器：

或者搜索一些复杂的重置，例如this one。

然后使用* { margin:0; padding:0; }上的值，您可以更好地自定义元素：

如何拉伸顶部导航以适合页面容器宽度

3 个答案: