将图像和用户界面放在同一行上
我知道这很简单,但我已经为此忙碌了几个小时。在我的标题中,我希望我的徽标和导航在同一条线上...基本上,我有这个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
,以便选项与徽标垂直对齐。
相关文章