Попытка показать элементы списка по вертикали, но два по горизонтали

У меня есть список с электронными письмами в элементе <ul>:

• электронная почта 1
• электронная почта 2
• электронная почта 3
• электронная почта 4

И я хочу показать эти элементы списка вертикально, как прежде, чем писать, но я также хочу, чтобы мой адрес электронной почты 1 и адрес электронной почты 2 были горизонтальными:

• email 1/email 2
• электронная почта 3
• электронная почта 4

Я уже пытаюсь использовать класс с дисплеем: 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/