Question

我正在创建一个包含一些嵌套div的网站。导航栏一直在创建一个糟糕的水平滚动条。到目前为止，我已经尝试定义div的宽度而没有运气。我也尝试设置max-width，但这也不起作用。

虽然我知道我可以隐藏x-overflow，但这似乎是一个可以在以后引起更多问题的绑定修复。

这是一张讨厌的滚动条/布局图片 - http://i.imgur.com/i7V3pxf.png

当我在chrome中检查元素时，似乎 life_link 可能是问题，但我无法找到导致它的原因。）：

HTML

<div id='nav'>
    <div id='button_wrapper_r'>
        <span class='navlink'><a href="#">characters</a></span>
        <span class='navlink'><a href="#">guidebook</a></span>
        <span class='navlink'><a href="#">faq</a></span>
    </div>

    <div id='life_link'><a href="/index.php">LIFE</a></div>

    <div id='button_wrapper_l'>
        <span class='navlink'><a href="#">modbox</a></span>
        <span class='navlink'><a href="#">packs</a></span>
        <span class='navlink'><a href="#">members</a></span>
    </div>
</div>

CSS

#nav {
background-image:url("/images/nav_bar.png");
width: 1027px;
height: 151px;
margin-top: 335px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
max-width: 1027px;
}

#nav a {
color: #bd916f;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Amaranth;
text-decoration: none;
font-size: 20px;
margin: 20px;
}

#nav a:hover {
color: #eff9ce;
}

#button_wrapper_r {
position: relative;
top: 54px;
left: 26px;
z-index: 3;
}

#button_wrapper_l {
position: relative;
top: -37px;
left: 620px;
z-index: 3;
}

#life_link {
position: relative;
top: 8px;
left: 460px;
z-index: 3;
}

#life_link a {
font-family: 'Cinzel Decorative', cursive;
font-size: 50px;
}

.navlink {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 -moz-osx-font-smoothing: grayscale;
 position: relative;
 overflow: hidden;
 }
.navlink:before {
 content: "";
 position: absolute;
 z-index: -1;
 left: 50%;
 right: 50%;
 bottom: 0;
 background: #9bd4bb;
 height: 2px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
.navlink:hover:before, .navlink:focus:before, .navlink:active:before {
 left: 0;
 right: 0;
}

Answer 1

#button_wrapper_l与#nav的宽度相同。但是然后你通过position: relative; left: 620px;向右移动它，并通过#nav元素的右侧获得不可见的部分，扩展页面的宽度。

<强> UPD

我使用另一种方式构建一个JSFiddle来构建菜单 - 没有任何相对位置：https://jsfiddle.net/LpbLmmvv/

但width存在小问题。它不适合您的1027px。

您最好使用flex代替（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）。但请记住它的浏览器支持 - http://caniuse.com/#search=flex

CSS - 导致这个水平滚动条的原因是什么？

1 个答案: