如何以水平对齐方式显示垂直列表

Question

https://jmri.org.in/jmri/issue/archive is the site. As you can see that the issues are arranged in vertical list. I want to show them in a horizontal list through html/css.

The code here in the template here is

<div class="issues_archive">
        {iterate from=issues item=issue}

            <ul>{if $issue->getYear() != $lastYear}
                <h2>{$issue->getYear()|escape} Issues</h2>
                {assign var=lastYear value=$issue->getYear()}<hr>
                {/if}
                                   {include file="frontend/objects/issue_summary.tpl"}
                        </ul>
                        <br><br>    
        {/iterate}

        {if $issues->getPageCount() > 0}
            <div class="cmp_pagination">
                {page_info iterator=$issues}
                {page_links anchor="issues" name="issues" iterator=$issues}
            </div>
        {/if}
    {/if}
</div>

.CSS code is

ul.csv2 { display: -webkit-inline-box; text-align: center; width: auto; position: relative; }

Answer 1

Edit:

I've noticed you have structural issues:

1. remove all the br tags
2. the h2 tag in issueabc, needs to be outside of csv class

After that add

display: inline-block; 

to the ul.csv

Since I haven't worked with PHP in years, my syntax will not be correct, but here it is:

{iterate from=issues item=issue}
    {if $issue->getYear() != $lastYear}
        <h2>{$issue->getYear()|escape} Issues</h2>
        {assign var=lastYear value=$issue->getYear()}<hr>
    {/if}
    <ul>
       {include file="frontend/objects/issue_summary.tpl"}
    </ul>
{/iterate}