0

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

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

CSS

 body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}
.navigation {
    position: relative;
    left: 15%;
    padding: 0 auto;
    list-style: none;
    text-align: center;
    display: inline-block;
}
.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;
}

这是我得到的最接近的，我尝试过 margin: 0 auto 以及 margin-left:auto; 边距右：自动；但似乎无法让他们工作。

4

3 回答 3

0

用这个：

变化是 position: absolute从relative和 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;
}
于 2013-08-02T11:53:45.533 回答
0

试试这个.container{width:you want; margin:0 auto;}在中心添加一个导航栏。

http://jsfiddle.net/bsyxG/7/

CSS

 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;
}
于 2013-08-02T11:55:11.197 回答
0

你可以使用left: 50% left:-50%技巧

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

http://jsfiddle.net/bsyxG/4/

于 2013-08-02T11:55:27.027 回答