html - 在CSS中创建水平列表

我希望将3个方框放在水平列表中。我使用的代码是

<div class="rowtitle">
    <ul>
        <li style="display: inline;">
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername"><? echo $first_block_text; ?></div>
                </a>
            </div>
        </li>
        <li style="display: inline;">
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername"><? echo $second_block_text; ?></div>
                </a>
            </div>
        </li>
        <li style="display: inline;">
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername"><? echo $third_block_text; ?></div>
                </a>
            </div>
        </li>
    </ul>
</div>

我用的CSS是

.rowtitle ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
#rowtitle ul li
    {
        display: inline;
    }

#rowtitle ul li a
    {
        text-decoration: none;
    }

但这些框未按水平列表排列。谁能告诉我该怎么做

最佳答案

删除ul li尽可能仅使用div
这是HTML代码

<div class="rowtitle">

            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">box1</div>
                </a>
            </div>

            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">box2</div>
                </a>
            </div>

            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">box3</div>
                </a>
            </div>

</div>

这是CSS

.service-wrapper1
{
    display:inline-block;
    width:20%;
}

here is fiddle

关于html - 在CSS中创建水平列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30074256/