Question

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

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

我想像以前一样在垂直方向显示这个列表项目，但我也希望我的电子邮件1和电子邮件2在水平方向如下：

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

我已经尝试使用带显示的类：内联但不起作用！

有人已经做过这样的事情并知道我该怎么办？

我有这个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。

Answer 2

您是否有任何理由不能简单地更改HTML以将电子邮件1和电子邮件2放在同一个<li>中？

示例：

<ul>
   <li><a href="#">email 1</a> / <a href="#">email 2</a></li>
   <li><a href="#">email 3</a></li>
   <li><a href="#">email 4</a></li>
   <li><a href="#">email 5</a></li>
</ul>

尝试垂直显示列表项，但水平显示两个项目

2 个答案: