将图像和用户界面放在同一行上

本文介绍了将图像和用户界面放在同一行上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我知道这很简单，但我已经为此忙碌了几个小时。在我的标题中，我希望我的徽标和导航在同一条线上...基本上，我有这个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>

下面是标题部分的一些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; }

结果是徽标出现在一行，ul导航出现在下一行...

推荐答案

您需要给<ul>display: inline-block。如果徽标的高度是固定的，您可能还希望为<ul>赋予适当的line-height，以便选项与徽标垂直对齐。