html - 带有图像和文本 css 的水平列表

Question

水平列表有问题...它应该是水平列表而不是垂直列表...

我的 html 代码是:

<section id="services">
    <header> 
        <h1>Serviços</h1>
    </header>
    <section>
        <ul>
            <li>
                <span class="webdesign"/>
                <h1>
                    <span>01.</span>
                    Webdesign 
                </h1>
            </li>
            <li>
                <span class="graphicdesign"/>
                <h1>
                    <span>02.</span>
                    Graphic design 
                </h1>
            </li>
            <li>
                <span class="webdeveloper"/>
                <h1>
                    <span>03.</span>
                    Web Developer
                </h1>

        </ul>
    </section> </section>

CSS代码是:

 /* services */

#services ul {  margin-top: 70px; }

ul {  line-height: 1.6; list-style-position: inside; margin-bottom: 17px; }

#services ul li {  list-style: none outside none; width: 25%; }

li {  display: list-item;  }

#services ul li h1 {  font-family: "LithosPro"; font-size: 12px; font-weight: 400; margin-top: 15px; text-align: center; text-transform: uppercase; }

#services ul li > span.webdesign:hover {  background-position: 0px -233px; }

#services ul li > span.graphicdesign {  background-position: -255px 0px; }

#services ul li > span.graphicdesign:hover {  background-position: -255px -233px; }

#services ul li > span.webdeveloper {  background-position: -528px 5px; }

#services ul li > span.webdeveloper:hover {  background-position: -528px -227px; }

#services ul li h1 span {  color: #FE4A4A; font-family: "amatic_scbold"; }

#services ul li > span {  background: url("../images/star.png") no-repeat transparent; display: block; height: 215px; width: 235px; }

如果有人能帮助我，我将不胜感激!

Answer 1

只需在 #services ul li 上设置 display:inline-block;

JSFIDDLE