css - 溢出-x : scroll does not scroll correctly

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纯黑色

你能截图或绘制你想要的东西吗？