0

cssでドロップダウンメニューを作ったら、ドロップダウンメニューの前後に改行が発生する HTMLコードはこちら

<body>
<!--nav class="navi"-->
<div class="navi" id="navi">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a>
        <ul>
          <li><a href="#">History</a></li>
          <li><a href="#">Company Profile</a></li>
          <li><a href="#">Core Values And Mission</a></li>
          <li><a href="#">Strategy</a></li>
        </ul>
      </li>
      <li><a href="#">Our Brands</a>
        <ul>
          <li><a href="#">HAMARA GLUCOSE D</a></li>
          <li><a href="#">HAMARA HEALTH CARE PATENT PRODUCTS</a></li>
          <li><a href="#">WAHT'S NEW</a></li>
        </ul>
      </li>
      <li><a href="#">Nutrition Space</a>
        <ul>
          <li><a href="#">Product FAQ</a></li>
          <li><a href="#">Health & Wellness</a></li>
        </ul>
      </li>
      <li><a href="#">Media</a>
        <ul>
          <li><a href="#">News Paper Clippings</a></li>
          <li><a href="#">Product Photos</a></li>
          <li><a href="#">Founder which...</a></li>
        </ul>
      </li>
      <li><a href="#">HSS</a></li>
      <li><a href="#">Copackers & Investors</a></li>
      <li><a href="#">Career</a></li>
      <li><a href="#">Communities</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
<!--/nav-->
</body>

そしてここにcssコードがあります

<style>
.navi ul li
{
    float:left;
}
.navi ul li a
{
    display:block;
    padding: 10px;
    text-decoration:none;
}
.navi ul li:hover > a
{
    color:white;
}
.navi ul
{
    display:inline-table;
    list-style:none;
    padding: 0 0px;
    position:relative;
    background:#C93;

}
.navi ul ul
{
    display: none;  
    position:absolute;
}
.navi ul ul li
{
    /*display:block;*/
    float:none;
}
.navi ul li:hover > ul
{
    display:block;  
    background:#FC0707;
}
</style>

だから私は改行を生成したくない

4

4 に答える 4

0

改行を生成する場所は? デフォルトの div 表示タイプはブロックで、親の 100% の幅を使用し、フロー内で隣にあるコンテンツを明らかに押し下げます。メニューの前後にコンテンツを追加しますか?

#navi{
  display: inline;
}

また、前後のコンテンツの display プロパティを inline ( width が指定されていない場合) または inline-block ( width を指定する場合) にします。

于 2013-07-31T11:13:28.107 に答える