如何将这些列表项和标签移动到图像的旁边

Question

我需要获取列表项（主页，最后一英里，供应链等）以及图像旁边的项目管理标签（灰色区域）。我觉得这应该很简单。但我无法弄清楚我的生活。

这是我的html代码：

        <div class="navbar">
        <div class="logo">
            <asp:image runat="server" CssClass="logo" ImageUrl="~/FidelitoneLogo.png" Width="62px" Height="33px"/>
        </div>
        <div class="Menu">
        <ul>  
            <li> <a href="#">Home</a></li>
            <li><a href="#">Last Mile</a></li>
            <li><a href="#">Order Fulfillment</a></li>
            <li><a href="#">Supply Chain</a></li>
            <li><a href="#">QB Products</a></li>
            <li><a href="#">Shared Services</a></li>
            <li><a href="#">Employee Resources</a></li>
            <li><a href="#">Quality</a></li>
        </ul>
        </div>
        <asp:Label ID="lblProjectManagement" runat="server" Text="Project Management" CssClass="pmLabel" Width="139px" Height="35px"></asp:Label>
        </div>

和CSS

.logo {
background: no-repeat;
padding: 0px;
margin: 0px;
width: 65px;
}

.Menu ul {
padding: 0px;
margin: 0px;
}

.Menu ul li {
display: inline;
padding: 5px;
font-size: 8px;
}

.Menu ul li a {
vertical-align: top;
padding-bottom:
}

.navbar div {
display: inline;
}

.pmLabel {
display: block;
font-size: 14px;
padding-left: 5px;
vertical-align: top;

}

Answer 1

将float:left;添加到您的.logo班级

https://jsfiddle.net/1wnyrfy6/

Answer 2

你需要漂浮一切。尝试添加此代码：

.logo {
    float: left;
}

我希望有所帮助。其他元素 - 列表和标签应该浮动在徽标的右侧。