When working with a lengthy list, I encountered an issue with horizontal scrolling. It worked fine when the list was statically implemented as shown below.
<div style="margin-top:100px;white-space: nowrap;">
<ul >
<li style="display:inline">wfwe1</li>
<li style="display:inline">wfwe2</li>
<li style="display:inline">wfwe3</li>
<li style="display:inline">wfwe4</li>
<li style="display:inline">wfwe5</li>
<li style="display:inline">wfwe6</li>
<li style="display:inline">wfwe7</li>
<li style="display:inline">wfwe1</li>
<li style="display:inline">wfwe2</li>
<li style="display:inline">wfwe3</li>
<li style="display:inline">wfwe4</li>
<li style="display:inline">wfwe5</li>
<li style="display:inline">wfwe6</li>
<li style="display:inline">wfwe7</li>
</ul>
</div>
However, when I tried to fetch the list via a loop, it did not display inline and therefore, horizontal scrolling was not possible. My attempted solution is outlined below.
<div
style="margin-top:100px;white-space: nowrap;">
<ul
v-for="(infoChildBtn, index) in infoSubContracts"
:key="index"
@click="infoTopBtnFun1(index, infoChildBtn)">
<li style="display:inline">
{{ infoChildBtn }}
</li>
</ul>
</div>
I am seeking guidance on where I went wrong and how to resolve this issue.