Question

我有一个网站，我设计的是响应各种浏览器和设备上的工作，我的大部分内容都设置为自动或100％的宽度。但是我的元素并不完全居中，因为网站包含滚动条下的宽度。我希望宽度到你可以看到的可用房间，这样我的网站就能正确居中。

例如，我的导航栏在左侧正确对齐，但在页面的右侧没有正确对齐。这是我的导航栏的CSS，我有LI项目组成HTML中的选项。

#header {
    border: 2px solid black;
    border-top: none;
    background-color: #FFFFFF;
    height: 2.75em;
    left: 0px;
    right: 0px;
    width: 100%;
    z-index: 1;
    position: fixed;
    margin-top: -2.55em;
}

#navbar {
    position: relative;
    text-align: center;
    right: 0px;
    left: 0px;
    width: auto;
    display: inline;
}

ul {
    left: 0px;
    right: 0px;
    top: 0px;
}

li {
    display: inline;
    text-align: center;
    width: auto;
    padding-left: 5em;
    padding-right: 5em;
}

Answer 1

请尝试：http://jsfiddle.net/sqp4nfg5/1/

和css：

  body { margin:0; padding:0

        }

#header {
    background-color: #777;
    color: #fff;
    float: left;
    width: 100%;
    z-index: 1;
}

#navbar {
    float: left;
    width: 100%;
}
ul { margin:0; padding:0

}

li {
  float: left;
    padding-left: 2%;
    padding-right: 2%;
    text-align: center;
    height:35px; line-height:35px; list-style:none;
}
.center_div{float:left; width:100%;  }
.center_div div{width:90%; margin:0 auto; overflow:hidden; border:1px solid lightpink; padding:1% 2%}

如何设置宽度以包含浏览器滚动条？

1 个答案: