Question

我正在创建一个WordPress主题，我想制作有溢出的粘性水平菜单：滚动。会发生什么事情，当我试图这样做时，它要么不工作，要么隐藏内容。

下面我发布了代码。

HTML：

.container
{
	height:100vh;
	
	
}

body
{
	background-color:grey;
	
}

#navmenu 
{
	position:sticky;
	height:70px;
	text-align:center;
	overflow:scroll;
	border-top:1px solid white;	
}

#navmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
	text-align:center;
	min-width:100%;
	
	
}

#navmenu li {
    float: left;
	font-size:14px;
	text-align:center;
	
	
	
}

#navmenu li a {
    display: inline-block;
    /*color: white;*/
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	
}

#navmenu li a:hover
{
	background-color:#111;
}



.logo
{
	height:50px;
	float:left;
}

<html>

<head>
	<link rel="stylesheet" type="text/css" href="about.css">
	
</head>



<body>
	
<div class="container">
<div id="logo"></div>

<div id="navmenu">
	
	<ul>
		<li><img style="height:70px" src="img/logo.png"></li>
		<li><a href="#">OPTION</a></li>
		<li><a href="#">OPTION <br>OPTION</a></li>
		<li><a href="#">OPTION <br>OPTION</a></li>
		<li><a href="#">OPTION <br>OPTION</a></li>
		<li><a href="#">OPTION</a></li>
		<li><a href="#">OPTION OPTION <br>OPTION</a></li>
		<li><a href="#">OPTION</a></li>
		<li><a href="#">OPTION <br>OPTION</a></li>
		<li><a href="#">OPTION</a></li>
	</ul>
	
	
	
</div>



</div>
</body>

</html>

Answer 1

将导航包装在具有指定宽度的附加div中。请参阅代码段：

＆＃13;

.container {
  height: 100vh;
}
body {
  background-color: grey;
}
#navmenu {
  position: sticky;
  height: 70px;
  text-align: center;
  overflow: scroll;
  border-top: 1px solid white;
}

#nav-inner {
  width: 10000px; 
 }
#navmenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  min-width: 100%;
}
#navmenu li {
  float: left;
  font-size: 14px;
  text-align: center;
}
#navmenu li a {
  display: inline-block;
  /*color: white;*/
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#navmenu li a:hover {
  background-color: #111;
}
.logo {
  height: 50px;
  float: left;
}

＆＃13;

<div class="container">
  <div id="logo"></div>

  <div id="navmenu">
    <div id="nav-inner">
      <ul>
        <li>
          <img style="height:70px" src="img/logo.png">
        </li>
        <li><a href="#">OPTION</a>
        </li>
        <li><a href="#">OPTION <br>OPTION</a>
        </li>
        <li><a href="#">OPTION <br>OPTION</a>
        </li>
        <li><a href="#">OPTION <br>OPTION</a>
        </li>
        <li><a href="#">OPTION</a>
        </li>
        <li><a href="#">OPTION OPTION <br>OPTION</a>
        </li>
        <li><a href="#">OPTION</a>
        </li>
        <li><a href="#">OPTION <br>OPTION</a>
        </li>
        <li><a href="#">OPTION</a>
        </li>
      </ul>
    </div>


  </div>



</div>

＆＃13;

Answer 2

该问题的作者已澄清（见评论）他们希望整个页面水平滚动，而不仅仅是导航栏。

这是一个JSFiddle解决方案：jsfiddle.net/qwjshv9s/1

此解决方案分为两部分。

除了身体滚动外，不要放任何东西。

摆脱所有overflow:scroll属性并将overflow-x:auto放在身体上。

不要让菜单换行。

将whitespace:nowrap应用于<ul>并将<li>元素从float:left切换为display:inline-block。

-

顺便说一下，要仅允许水平滚动，您可以使用：

overflow-x: scroll;

这只允许在X轴上滚动。如果您不希望滚动条始终存在，则可以执行

overflow-x: auto;

并且仅在需要时滚动。

如何溢出：滚动粘性div

2 个答案: