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

我已经做了很多尝试来实现这一目标。
我试图在两个单独的行上实现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;
}

最佳答案

这样的事情可能会起作用：

<ul>

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

</ul>