在css中创建水平列表

Question

我想把三个方框放在一个横向列表中。我使用的代码是

<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; 
    }

但是这些盒子并没有被安排在一个横向列表中。有人能告诉我怎么做吗？

Answer 1

删除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%;
}

这是小提琴

Answer 2

#rowtitle ul li 
    { 
        display: inline-block; 
    }

Answer 3

您使用id显示<li>样式，但在html和第1行css中使用了类。尝试像这样改变它：演示

CSS：

#rowtitle ul 
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
#rowtitle ul li 
    { 
    display: block; 
    float:left; /* instead you can use  display: inline-block;    */
    background-color:#ccc; margin-right:2px;
    }

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

HTML：

<div id="rowtitle">
    <ul>
        <li >
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">1</div>
                </a>
            </div>
        </li>   
        <li >
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">2</div>
                </a>
            </div>
        </li>   
        <li >
            <div class="service-wrapper1">
                <a href="#">
                    <div class="wrappername">3</div>
                </a>
            </div>
        </li>   
    </ul>
</div>