1

我的网站左上方有一个徽标。我正在尝试将导航菜单垂直对齐到徽标的右侧。但它总是出现在徽标的底部。我试过了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>

4

2 回答 2

3

只需添加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;
}
于 2013-02-25T19:41:42.143 回答
1

改成.logo这样：

.logo img {
    float:left;
}

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

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

于 2013-02-25T19:40:05.733 回答