Here is the HTML structure I am working with:
<div>
<a>..</a>
<i>..</i>
<a>..</a>
<i>..</i>
<a>..</a>
<i>..</i>
</div>
On larger screens, all elements are displayed inline horizontally. However, on smaller screens like mobile devices, the elements wrap to two lines. Is there a way to keep them on one line and allow horizontal scrolling?
I attempted to use the following CSS:
div {
overflow-x: scroll;
overflow-y: hidden;
}
Unfortunately, this did not produce the desired result.