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

【问题标题】：How to stretch top nav to fit page container width如何拉伸顶部导航以适应页面容器宽度
【发布时间】：2013-12-27 00:54:26
【问题描述】：

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

我正在尝试使该网站上的顶部导航拉伸以适应我理解为 900 像素宽的网站“容器”的宽度。我一生都无法删除导航左侧和右侧的填充或边距。请参阅下面的代码。

此处为网站截图：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;
}

【问题讨论】：

一些HTML和JSFiddle怎么样：jsfiddle.net？
您能添加一些 HTML 来向我们展示您的页面结构吗？更好的是，设置一个小提琴 (jsfiddle.net)

标签： css

【解决方案1】：

试试

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

另见：

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

希望这会有所帮助。干杯。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您好，如果您是新手，您需要知道默认情况下，所有元素标签（如 ul、p 或 body）在属性（如 margin 和 padding）上都有默认值。您需要首先在 CSS 中重置这些值以避免问题并使您的定制更容易。在您的情况下，ul 具有一些属性：

ul {
  display: block;
  list-style-type: disc;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  padding-start: 40px; 
}

您可以将这个简单的全局重置与* 用作全局选择器：

* {
  margin:0;
  padding:0;
}

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

然后使用 0 上的值，您可以更好地自定义您的元素：

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

【讨论】：