0

多くの div に clearfix を適用するのに問題がありました。こことここにあるいくつかのチュートリアルに従いましたが、Bar という名前の div はロゴとナビゲーション div の両方を保持するように拡張されません。

これが私のマークアップです。あらゆるアドバイスをいただければ幸いです。div をいくつかの奇妙な色にして、div がどこで終了しているかを確認しやすくし、何が起こっているのかを正確に確認できるようにしました。

<div id="bar" class="group">
    <div id="nav">
        <ul>
            <a href="#"><li>Home</li></a>
            <a href="#"><li>What We Do</li></a>
            <a href="#"><li>Our Work</li></a>
            <a href="#"><li>Our People</li></a>
            <a href="#"><li>Contact Us</li></a>
        </ul>
    </div>
    <div id="logo">
        <img src="images/logo.png" title=""    alt="" />
    </div><!--Close Logo-->

CSS:

body{
  margin:0;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

#bar{
  background-color: #e2871a;
  width:100%;
}

/*NAVIGATION */
#nav{
  color:#fff;
  float:right;
  margin-right:50px;
  background-color:chartreuse;
}

#nav>ul{
  list-style:none;
  padding:0;
  margin:0;
}

#nav>ul li{
  display:inline;
}

#nav>ul a>li {
  color:#fff;
  padding-bottom:100px;
  background-color:blue;
  margin-right:15px;
}

#nav>ul a>li:hover{
  border-bottom:3px solid white;
} 

#logo{
  float:left;
  width:15%;
  margin-left:5%;
  background-color:red;
}
4

1 に答える 1

0

問題は次のとおりです。

#nav>ul li{
   display: inline;
}

上下のパディングまたはマージンは、親に対するインライン要素の高さに影響しません。作っblockたり inline-block

于 2013-06-18T16:22:54.863 に答える