Html 使用CSS对中导航栏

我意识到这个问题在这个网站上被问了很多次，还有很多其他的问题，可能太多次了，我尝试了很多不同的解决方案，但没有找到一个合适的解决方案，我正在尝试用隐藏溢出自动居中，有没有CSS大师愿意告诉我哪里出了问题？我一直在磕头有一段时间了。这是我的 谢谢你的帮助

这是我的CSS，因为小提琴必须伴奏

CSS

这是我得到的最接近的一次，我尝试了margin:0 auto和margin left:auto；

---

右边距：自动；但似乎无法让他们工作

使用这个：

更改为位置：绝对相对，左边距：自动；右边距：自动

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}
.navigation {
    position: absolute;
    padding: 0 auto;
    list-style: none;
    text-align: center;
    display: inline-block;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
.navigation li {
    float: left;
    width: 150px;
    position: relative;
}
.navigation li a {
    background: #262626;
    color: #fff;
    display: block;
    padding: 8px 7px 8px 7px;
    text-decoration: none;
    border-top: 1px solid #F2861D;
    text-align: center;
    text-transform: uppercase;
}
.navigation li a:hover {
    color: #F2861D;
}
.navigation ul {
    position: absolute;
    left: 0;
    display: none;
    margin: 0 0 0 -1px;
    padding: 0;
    list-style: none;
    border-bottom: 3px solid #F2861D;
}
.navigation ul li {
    width: 150px;
    border-top: none;
}
.navigation ul a {
    display: block;
    height: 15px;
    padding: 8px 7px 13px 7px;
    color: #fff;
    text-decoration: none;
    border-top: none;
    border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
    color: #F2861D;
}

---

尝试添加一个

.container{width:您想要的；margin:0auto；}

然后在中间添加导航栏

CSS

---

您可以使用

left:50%

left:-50%

技巧

.wrapper {
    position: relative;
    left: 50%;
}
.navigation {
    position: relative;
    left: -50%;
}

---

我不太明白您的要求。O请尝试更好地解释“我正在尝试使用隐藏溢出自动居中”我尝试了一下，Ahmed，但在我的网站上，它只是将导航栏移到最左边，谢谢您的回复。我在JSFIDLE上尝试过，下面是再次检查的链接：我希望您提供一些解释，然后我会投票：）试试这个？你应该解释一下你在现有代码中修改了什么，以及它是做什么的/它是如何工作的…Fags你真的是一个CSS大师，接下来我将尝试在隐藏溢出中工作，但我只关心自动中心，我确实想到了在div中有一个div，但我仍然是一个初学者。再次感谢您的帮助！！！谢谢@DrewG请接受我的回答，投一票，欢迎你

 body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin:0;
    padding:0;
}
.container{
    width:1004px;
    margin:0 auto;
    text-align:center;
}
.navigation {
   text-align: center;
    display:inline-block;
    list-style-type:none;

text-align:center;
}
.navigation li {
    float: left;
    width: 150px;
    position: relative;
}
.navigation li a {

    color: #fff;
    display: block;
    padding: 8px 7px 8px 7px;
    text-decoration: none;
    border-top: 1px solid #F2861D;
  background: #262626;
    text-align: center;
    text-transform: uppercase;
}
.navigation li a:hover {
    color: #F2861D;
}
.navigation ul {
    position: absolute;
    left: 0;
    display: none;
    margin: 0 0 0 -1px;
    padding: 0;
    list-style: none;
    border-bottom: 3px solid #F2861D;
}
.navigation ul li {
    width: 150px;
    border-top: none;
}
.navigation ul a {
    display: block;
    height: 15px;
    padding: 8px 7px 13px 7px;
    color: #fff;
    text-decoration: none;
    border-top: none;
    border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
    color: #F2861D;
}

.wrapper {
    position: relative;
    left: 50%;
}
.navigation {
    position: relative;
    left: -50%;
}