您好我正在努力应对我使用CSS网格实施的挑战。
我唯一的问题是我需要最高的菜单,固定宽度为520px,固定位置可以在水平轴上的较小设备上滚动,请指教?
出于某种原因overflow-x:auto;在这种情况下似乎不起作用....
<!--html-->
<main>
<div class="main-menu-container">
<ul class="main-menu">
<li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" >ALL</a></li>
<li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" data-griditem="a">A</a></li>
<li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" data-griditem="b">B</a></li>
<li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items"data-griditem="c">C</a></li>
<li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" data-griditem="d">D</a></li>
<li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" data-griditem="e">E</a></li>
</ul>
</div>
<section class="main-grid">
<article class="main-grid__item main-grid__item--type-a is-visible">A</article>
<article class="main-grid__item main-grid__item--type-c is-visible">C</article>
<article class="main-grid__item main-grid__item--type-b is-visible">B</article>
<article class="main-grid__item main-grid__item--type-e is-visible">E</article>
<article class="main-grid__item main-grid__item--type-b is-visible">B</article>
<article class="main-grid__item main-grid__item--type-d is-visible">D</article>
<article class="main-grid__item main-grid__item--type-a is-visible">A</article>
<article class="main-grid__item main-grid__item--type-b is-visible">B</article>
<article class="main-grid__item main-grid__item--type-c is-visible">C</article>
<article class="main-grid__item main-grid__item--type-d is-visible">D</article>
<article class="main-grid__item main-grid__item--type-a is-visible">A</article>
<article class="main-grid__item main-grid__item--type-e is-visible">E</article>
</section>
</main>
<script src="js/site.js" type="text/javascript" ></script>
CSS:
body {
padding: 0;
margin:0;
}
main {
max-width: 940px;
margin: 0 auto;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
position: relative;
padding: 0 15px;
box-sizing:border-box;
}
.main-menu-container {
position: fixed;
width: 910px;
top:0;
float:left;
height: 40px;
}
.main-menu {
display: grid;
list-style: none;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
padding: 0;
overflow-x: auto;
margin:0;
padding: 1em 0;
background: #fff;
width: 100%;
height: 100%;
}
.main-menu__link {
display: block;
text-align: center;
padding:0.4em;
background-color: #9A9B9E;
color: #fff;
text-decoration: none;
}
答案 0 :(得分:1)
在您的演示中,您将最顶层的菜单(.main-menu
)设置为width: 910px
。
.main-menu {
display: grid;
list-style: none;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
padding: 0;
position: static;
overflow-x: auto;
margin: 0;
padding: 1em 0;
background: #fff;
width: 910px; <----------
height: 100%;
}
此菜单的父容器(.main-menu-container
)也设置为width: 910px
。
.main-menu-container {
position: absolute;
width: 910px; <----------
top: 0;
left: 15px;
}
由于它们始终具有相同的宽度,因此无论屏幕大小如何,都不会出现溢出。
要允许溢出条件,请对父级进行此调整:
.main-menu-container {
position: absolute;
/* width: 910px; */
top: 0;
left: 15px;
width: 100%; /* new */
overflow-x: auto; /* new */
}
答案 1 :(得分:0)
您需要使用类&#34; .main-menu-container&#34;更改元素。在响应中改变宽度,它不依赖于main,因为它是固定的。您还需要将宽度设置为&#34; li&#34;元素因为它们正在适应父宽度,并且只在较低宽度的空间中生成自动滚动。的问候,