0

我知道这很简单，但是我已经为此烦恼了好几个小时了。在我的标题中，我希望我的徽标和导航位于同一行...基本上，我有这个 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;
}

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

4

4 回答 4

2

你需要给<ul> display: inline-block. 如果 logo 的高度是固定的，您可能还想给<ul>a 合适line-height的选项，以便选项相对于 logo 垂直对齐。

于 2013-01-14T09:08:24.440 回答
1

尝试添加到徽标：

.logo {
    float: left; 
    width: 20%; //Or whatever the width is
}

这应该在它旁边进行总结。如果没有，您可能需要添加类似于

.nav {
    float: left; 
    width: 70%;
}
于 2013-01-14T09:08:09.910 回答
0

检查这个：Inline Logo and Nav

只需将.logo和.nav都浮动到左侧并在底部有明确的修复。

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

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

.nav {
    padding: 20px 10px 10px 10px;
    list-style:none;
    margin:0;
    float:left;
}

.nav li {
    display: inline;
}

.clear{
  clear:both;
}

为了使它们正确（垂直）对齐，将填充应用于导航与您在图像上使用的相同..

希望这可以帮助

于 2013-01-14T09:23:50.520 回答
0

默克斯..

尝试这个...

    .logo {
    margin:0;
    padding:0;
    display:inline;
    }

看看http://jsfiddle.net/vZZDJ/

祝你好运...）

于 2013-01-14T11:10:16.260 回答