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 に答える