Question

我有一个简单的问题。我试图在论坛上找到自己的一切，但没有运气，所以我会直截了当。我创建了这个导航栏，但遇到了问题。当我放大时，它会完美地放大，不会发生冲突或任何事情，但它不会向左或向右滚动（同时它不会显示整个导航栏，当放大时在）。

 <html>

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='design.css' />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

<script src="brain.js"></script>

<body>
<div class="wrap">
    <div id="navigation">
        <ul>
            <li><a href="#"> Home</a> </li>
            <li><a href="#"> Top rated</a> </li>
            <li><a href="#"> Suggestions</a> </li>
            <li><a href="#"> Latest news</a> </li>
            <li><a href="#"> About</a> </li>
            <li><a href="#"> Contact us</a> </li>
        </ul>
    </div>
<div >

</div>
</div>
</body>

</html>

CSS：

body {
margin: 0px;
padding: 0px;
}

.wrap {
width: 80%;
margin: 0 auto;
height: 800px;
}

#navigation {
height: 40px;
font-size: 14px;
font-weight: bold;
text-shadow: 3px 2px 3px #333333;
width: 100%;
min-width: 800px;
}

#navigation a {
text-decoration: none;
color: #00F;
padding: 13px 12px 12px 12px;
color: white;
}

#navigation li {
display: inline-block;
}

#navigation ul {
background-color: #3d3f45;
text-align: left;
padding: 10.5px 0px;
margin: 0px;
}

#navigation ul li:hover a {
background-color: rgb(148, 145, 145)
}

Answer 1

指示滚动条（在您的情况下）是否为<html>元素的元素。如果您要查看行中提供的CSS文件链接：

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

您会看到类似这样的内容：html{overflow-x:hidden}

此行导致此问题。您必须编写一些覆盖它的CSS。我继续创建了一个展示修复的示范代码。请参阅以下链接：

http://codepen.io/anon/pen/KrybjR

放大时在网络上滚动

1 个答案: