CSS - HTML：如何设置li标签的样式。 1 li标签然后2直接在下面

Question

我尝试过多次尝试。 我试图在两个单独的行上实现3 li标签。在第一行1 li标签上，直接在一行上的2 li标签下面。

这就是我想要实现的目标：

这就是我现在所拥有的：

HTML

   <section id="logout">
            <nav>
                <ul id="l">

                    <li id="email"><a href="#"><?php echo $_SESSION['Franchise_email']; ?></a></li>
                    <br>
                    <li class="line"><a href="Franchise-Details.php">C-Panel</a></li>
                    <li class="line"><a href="Logout.php"> | Logout </a></li>

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

CSS

section#logout{
font-family: AmsiPro-XLight;
float:right;
padding-right: 40px;
display: inline; 
margin-right: 15px;
text-decoration: none;
font-size:1em;
width: 150px;
height: 75px;
}

ul#l li{
font-family: AmsiPro-XLight;
display: inline;

}


 li.line{
 white-space:nowrap;
display: inline;
}

Answer 1

这样的事可能有用：

<ul>

    <li>First Line</li>
    <li style="float:left;display:inline;">Hi:</li>
    <li style="float:left;display:inline;">There</li>

</ul>

Answer 2

您可以设置要显示的列表项：inline-block以允许它们并排，然后重置第一个li以显示：block。

ul {
 background-color: black;
 color: white;
 list-style-type: none;
 font-family: sans-serif;
}
li {
 display: inline-block;
}
li:first-child {
 display: block;
}