Html 将导航栏居中

使用下面的CSS，我试图在页面顶部（固定在顶部）创建一个导航栏，但我希望它位于屏幕的绝对左侧，而不是居中

ul#list-nav
{
    position:fixed;
    top:0;
    left:0;
    margin:auto;
    padding:0px;
    width:100%;
    height:28px;
    font-size:120%;
    display:inline;
    text-decoration:none;
    list-style:none;
    background-color: #1F1F1F;
    border:none;
    z-index:1000;
}

ul#list-nav li
{
    float:left;
}
ul#list-nav a
{
    background-color:#1F1F1F;
    color:#C4C4C4;
    /*display:block;*/
    padding:5px 15px;
    text-align: center;
    text-decoration:none;
    font-size:14px;
}

ul#list-nav a:hover
{
    background-color:#4D4D4D;
    text-decoration:none;
}

ul#list-nav a:active
{
    background-color:#9C9C9C;
    text-decoration:none;
}

到目前为止，尝试使其成为垂直列表，或使按钮从中心开始（而不是居中）。我怎样才能做到这一点

编辑：下面是HTML。。。这个列表是唯一的样式

<ul id="list-nav">
            <li><a href="/ourbs/index.php">Home</a></li>
            <li><a href="/ourbs/categories/projects.php">Projects</a></li>
            <li><a href="/ourbs/categories/opinion.php">Opinion</a></li>
            <li><a href="/ourbs/categories/humour.php">Humour</a></li>      
            <li><a href="/ourbs/categories/games.php">Games</a></li>
            <li><a href="/ourbs/categories/movies.php">Movies</a></li>
            <li><a href="/ourbs/categories/tvshows.php">TV Shows</a></li>
</ul>

EDIT2：如果有帮助，这里有一个JSFIDLE

---

您需要在3个嵌套的div中插入列表：

在css中：

div#container1
{
  position:fixed;
  top:0;
  left:0;
  width:100%
}

div#container2
{
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

div#container3
{  
  display:inline-block; 
}

然后在html中：

<div id="container1">
<div id="container2">
<div id="container3">
<ul id="list-nav">
...
</ul>
</div>
</div>
</div>

...

有关正确居中的代码版本，请参见使用：

#list-nav {
    padding: 0px;
    height: 28px;
    font-size: 120%;
    margin: auto;
    text-align: center;
    list-style: none;
    background-color: #1F1F1F;
    border: none;
    z-index: 1000;
}
#list-nav li {    
    display: inline;    
    text-align: center;
}
#list-nav a {   
    color: #C4C4C4;
    background-color: #1F1F1F;   
    display: inline;   
    text-decoration: none;
    padding: 5px 15px;    
    font-size: 14px;
}
#list-nav a:hover {  
    background-color: #4D4D4D;   
    text-decoration: none;
}
#list-nav a:active {   
    background-color: #9C9C9C;  
    text-decoration: none;
}

我删除了所有不必要的编码，这些编码不会以任何方式改变菜单

请在此处观看现场演示：

编辑：修改以与IE6兼容+

---

希望这能有所帮助。

您只需要一个包装器

div

即可完成此任务

注意：使用

display:inline

我的答案也是，如果这很重要的话

CSS:

div#wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    height:28px;
    background-color: #1F1F1F;
    border: none;
    z-index: 1000;
}
ul#list-nav {
    padding: 0px;
    width: auto;
    font-size: 120%;
    text-decoration: none;
    list-style: none;
}
ul#list-nav li {
    display: inline;
}

<div id="wrapper">
    <ul id="list-nav">
        <li><a href="/index.php">Home</a></li>
        <li><a href="/ourbs/categories/projects.php">Projects</a></li>
        <li><a href="/categories/opinion.php">Opinion</a></li>
        <li><a href="/categories/humour.php">Humour</a></li>        
        <li><a href="/categories/games.php">Games</a></li>
        <li><a href="/categories/movies.php">Movies</a></li>
        <li><a href="/categories/tvshows.php">TV Shows</a></li>
    </ul>
</div>

HTML:

div#wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    height:28px;
    background-color: #1F1F1F;
    border: none;
    z-index: 1000;
}
ul#list-nav {
    padding: 0px;
    width: auto;
    font-size: 120%;
    text-decoration: none;
    list-style: none;
}
ul#list-nav li {
    display: inline;
}

<div id="wrapper">
    <ul id="list-nav">
        <li><a href="/index.php">Home</a></li>
        <li><a href="/ourbs/categories/projects.php">Projects</a></li>
        <li><a href="/categories/opinion.php">Opinion</a></li>
        <li><a href="/categories/humour.php">Humour</a></li>        
        <li><a href="/categories/games.php">Games</a></li>
        <li><a href="/categories/movies.php">Movies</a></li>
        <li><a href="/categories/tvshows.php">TV Shows</a></li>
    </ul>
</div>

到目前为止，您收到的答案只是猜测，没有看到您的HTML。同时发布一个JSFIDLE也很好。我已经添加了HTML，但我现在将研究JSFIDLE，感谢可能的副本和其他许多。这通常是一个很好的建议。但是，您还没有看到OP的HTML，因此我不知道您如何才能给出任何答案。@rar，我不知道您如何期望任何人在没有看到您的HTML的情况下理解这一点。您不能在“…”中复制粘贴您以前的列表。例如，您可能想从列表样式中删除“position:fixed”，我添加了HTML，我想，因为只有列表被样式化，所以无论是否使用HTML，它都不会有太大的区别，但我已将其包含在原始帖子中。它仍然拒绝移动到中心。您的答案在您的小提琴中起作用，但当我尝试添加到我的小提琴时，它并没有被注意。应该注意，显示：内嵌块是.@ SARKY672认为它是固定的，兼容IE6+和所有其他浏览器而不需要额外的元素。您不必修复它。为读者记下兼容性问题很好。@Sparky672我通常喜欢尽可能多的兼容浏览器，我只是没有意识到IE 6和7不支持内联块，谢谢你向我指出。@rar，Danny的最后一个JSFIDLE，这个答案已经完全演变成我第一个解决的问题（固定位置包装和显示内联）。英雄联盟