html - CSS - HTML : How to style li tags. 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>