如何拉伸顶部导航以适应页面容器宽度
Posted
技术标签:
【中文标题】如何拉伸顶部导航以适应页面容器宽度【英文标题】：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) 【参考方案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%;
【讨论】：
以上是关于如何拉伸顶部导航以适应页面容器宽度的主要内容，如果未能解决你的问题，请参考以下文章
PySide2，如何拉伸 QTableWidget 以适应窗口宽度？