Question

我的网站左上方有一个徽标。而我正试图将导航菜单垂直对齐到徽标的右侧。但它总是出现在徽标的底部。我试过float:left。

我想这是一件简单的事，但我不能这样做。我可能需要一个包装器。我在这做错了什么？

这是我的代码：

.logo {}

#topnav {
  width: 100%;
  vertical-align: middle;
}

nav ul {
  background: #FFFFFF;
  padding: 0 10px;
  list-style: none;
  position: relative;
  float: left;
  display: inline-table;
  font-size: 90%;
  color: #666666;
}

<div class="container">

  <div class="logo">
    <a href="/"><img src="assets/images/logo.png" alt="" width="250" height="120" /></a>


    <div class="topnav">
      <nav>
        <ul>
          <li><a href="http://www.kursatkarabulut.com/">Home</a></li>
          <li><a href="http://www.kursatkarabulut.com/fiap/">Photos</a></li>
        </ul>
      </nav>

    </div>
  </div>

Answer 1

只需将float: left添加到徽标类中即可：http://jsfiddle.net/dssHf/ 我还重新构建了HTML代码，因为它无效。

<div class="container">

    <div class="logo"><a href="/"><img src="http://placehold.it/250x120" alt="" /></a></div>  

    <div class="topnav"> 
        <nav>
            <ul>
                <li><a href="http://www.kursatkarabulut.com/">Home</a></li>
                <li><a href="http://www.kursatkarabulut.com/fiap/">Photos</a></li>        
            </ul>
        </nav>
   </div>
</div>

.container {
    clear: both;
}
.logo {
    float: left;
}
.logo img {
    width: 250px;
    height: 120px;

}
.topnav {
    margin-left: 260px;
}

Answer 2

将.logo更改为：

.logo img {
    float:left;
}

http://jsfiddle.net/87KCt/4/

CSS是级联样式表。这意味着一些事情，但这里的级联意味着类.logo的样式只会级联到img标记。

浮动导航到徽标的右侧

2 个答案: