Question

我希望能够通过某些文章水平滚动，但是它不起作用。我尝试在内容周围加上边框，以使某些内容被切除，以便可以滚动，但在执行此操作时文章会垂直对齐...

这是我正在使用的代码：

HTML：

                <a href="verhaal.html"> <img class="x"  src="images/haiku.jpeg" alt="mop"></a>

                <h3>Haiku</h3>
                <p>Rust, vrolijk, kort.</p>

                <img class="rating" src="images/rating.png" alt="sterren">

                <button class="down"></button>

            </article>


            <article>

                <img class="x" src="images/mop.jpeg" alt="mop">

                <h3>De mop</h3>
                <p>Licht, grappig, kort.</p>

                <img class="rating" src="images/rating.png" alt="sterren">

                <button class="down"></button>


            </article>

CSS：

 div#scroll1{
      border: solid;
      width: 24em;
      height: 22em;
      overflow-y: hidden;
      overflow-x: scroll;
   }

Answer 1

您能提供完整的html代码吗？或更大的一部分，因为我们看不到您的div＃scroll1在哪里。

此外，在CSS中更改边框： 边框：1px纯黑色

您可以对想要的内容进行截图或绘制吗？

Answer 2

您需要2个div，一个用于滚动，一个用于在其中对齐内容。

HTML ：

<div id="scroll">
  <div id="alignment">
    <article>
      ...
    </article>
    <article>
      ...
    </article>
  </div>
</div>

CSS ：

#scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 24em;
  height: 24em;
}

#alignment {
  overflow: hidden;
  /* Increase width depending on how many articles you wanna show */
  width: 240em;
  height: 24em;
}

article {
  float: left;
  border: 1px solid black;
  width: 24em;
  height: 22em;
}

这里有一个JSFiddle。

溢出-x：滚动不能正确滚动

2 个答案: