html - 将图像和 ul 放在同一行

Question

我知道这很简单，但我已经为此烦恼了几个小时。在我的页眉中，我希望我的 Logo 和导航在同一行上......基本上，我有这个 HTML:

<div class="menu">
    <div class="ct-header-line"></div>
    <img class="logo" src="images/clinictechlogo.png">
    <ul class="nav">
        <!--common features, coded? or static?-->
        <li class="active"><a href="#" id="homenav">Home</a></li>
        <li><a href="#" id="apptenav">Appointments</a></li>
        <li><a href="#" id="presnav">Prescriptions</a></li>
        <li><a href="#" id="prnav">Patient Records</a></li>
        <li><a href="#" id="billsnav">Bills</a></li>
        <!--special features, coded.....-->
        <li><a href="#">Charts</a></li>
        <li><a href="#">something</a></li>
    </ul>
</div>

这是 header 部分的一些 CSS:

.logo {
    padding: 20px 10px 10px 10px;
    display: inline;
}

.menu {
    background: #4F97BD url(images/headerbg.jpg) repeat;
}

.nav {
    list-style:none;
    margin:0;
}

.nav li {
    display: inline;
}

结果是一行出现logo，下一行出现ul nav...

Answer 1

您需要提供 <ul> display: inline-block .如果 Logo 的高度是固定的，您可能还想给 <ul>一个合适的line-height以便选项与 Logo 垂直对齐。