我正在尝试对页面中的所有链接进行水平滚动,我已经使它们水平 float 但不能使它们滚动,因为 body 的最大宽度设置为 100%(由于其他原因,这是必要的)页面元素!)。
这是标记:
<div class="header">
<div class="filters">
<a data-filter="*">All</a>
<a data-filters=".anim">animals</a>
<a data-filters=".benc">benches and sofa</a>
<a data-filters=".colu">columns and pillars</a>
<a data-filters=".entr">entry gates</a>
<a data-filters=".fire">fire places</a>
<a data-filters=".flow">flower pot</a>
<a data-filters=".foun">fountain</a>
<a data-filters=".gaze">gazebo</a>
<a data-filters=".jaal">jaalis and grills</a>
<a data-filters=".ligh">light lamps</a>
<a data-filters=".natu">natural planters</a>
<a data-filters=".stat">statues</a>
<a data-filters=".wash">wash basins</a>
</div>
</div>
她是CSS:
.header{
height: 180px;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.header .filters{
background-color: whitesmoke;
position: fixed;
width:auto;
margin-top: 130px;
max-height: 50px;
z-index: 1000;
overflow-x: scroll;
overflow-y: hidden;
padding: 17px 10px;
white-space: nowrap;
}
.header .filters a{
margin: 0 10px;
font-family: LatoWebLight;
font-size: 16px;
width: 150%;
cursor: pointer;
}
还提供一个 JSfiddle如果您需要,同样如此!
我只需要这个 div 滚动中的元素,而不是所有元素和整个页面!
感谢所有的帮助:)
最佳答案
您在 .filter
元素上设置了 width: auto
,这使得该元素随内容增长而不会创建滚动。我将其更改为 width: 100%
,现在它可以滚动了。
我还添加了 box-sizing: border-box;
使 padding: 17px 10px;
值被计算在宽度内。
html, body {
margin: 0;
}
.header{
height: 180px;
width: 100%;
}
.header .filters {
background-color: whitesmoke;
position: fixed;
width:100%;
margin-top: 130px;
max-height: 50px;
z-index: 1000;
overflow-x: scroll;
overflow-y: hidden;
padding: 17px 10px;
white-space: nowrap;
box-sizing: border-box;
}
.header .filters a{
margin: 0 10px;
font-family: LatoWebLight;
font-size: 16px;
width: 150%;
cursor: pointer;
}
<div class="header">
<div class="filters">
<a data-filter="*">All</a>
<a data-filters=".anim">animals</a>
<a data-filters=".benc">benches and sofa</a>
<a data-filters=".colu">columns and pillars</a>
<a data-filters=".entr">entry gates</a>
<a data-filters=".fire">fire places</a>
<a data-filters=".flow">flower pot</a>
<a data-filters=".foun">fountain</a>
<a data-filters=".gaze">gazebo</a>
<a data-filters=".jaal">jaalis and grills</a>
<a data-filters=".ligh">light lamps</a>
<a data-filters=".natu">natural planters</a>
<a data-filters=".stat">statues</a>
<a data-filters=".wash">wash basins</a>
</div>
</div>
关于html - CSS:无法使所有链接水平滚动超出页面宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37893840/