Question

我正在尝试对页面中的所有链接进行水平滚动，我已使它们水平浮动但不能使它们滚动，因为主体的最大宽度设置为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内滚动元素而不是所有元素和整个页面！

感谢所有帮助：）

Answer 1

width: auto元素上有.filter，这会使元素随内容增长而不创建滚动。我将其更改为width: 100%，现在它会滚动。

我还添加了box-sizing: border-box;，以便在宽度范围内计算padding: 17px 10px;值。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

CSS：无法使所有链接水平滚动显示页面宽度

1 个答案: