html - 尝试垂直显示列表项但水平显示两个元素

Question

我在 <ul> 中有一个包含电子邮件的列表元素:

• 电邮 1
• 电子邮件 2
• 电子邮件 3
• 电子邮件 4

我想像以前写的那样垂直显示此列表项，但我也希望我的电子邮件 1 和电子邮件 2 水平显示:

• 电子邮件 1/电子邮件 2
• 电子邮件 3
• 电子邮件 4

我已经尝试使用带有 display:inline 的类，但不起作用!

有人已经做过类似的事情并且知道我该怎么做吗？

我有这个 html:

<footer id="footer-container">
    <section id="footer1"> 
       <div id="col">
            <h1>Contacts</h1>
            <ul>
                <li class="email"><a href="#">email 1</a></li>
                <li class="email"><a href="#">email 2</a></li>
                <li class="email"><a href="#">email 3</a></li>
                <li class="email"><a href="#">email 4</a></li>
            </ul>
       </div>  
   </section>
</footer>

还有这个 Css:

     #footer-container
{
    width:100%;
    float:left; 
    background:brown;   
}

#footer1
{
    width:480px;
    margin:0 auto 0 auto;
}


#footer1 ul 
{
 /*list-style:none*/
}

#footer1 ul li
{
    margin:0 0 7px 0;
}

#footer1 ul li a 
{   
    text-decoration:none;
    color:#ccc;
    font-size:15px;
}

#col
{
    float:left;
    margin:10px auto 0 auto;
    width:480px;
}

http://jsfiddle.net/JJSLZ/

Answer 1

您可以使用 nth-child(-n+2) 将前两个元素的显示更改为 inline-block。

Example here

li.email:nth-child(-n+2) {
    display:inline-block;
}

..如果你想要要点，可以选择example here .