5

私はcssとhtml5を初めて使用し、メニューバーを正しく機能させようとしています。ドロップダウン機能付きの横型メニューバーです。メニューバーを中央に配置する前は、ナビゲーションボタンとドロップダウンボタンの間にスペースはありませんでした。それを中央に配置した後、それらの間にスペースができます。これは、それらの間に入ると、ドロップダウンで、スペースのためにドロップダウンメニューが失われるためです。したがって、ボタン間のスペース（境界線ではない）を削除しようとしています。ここにあなたの助けをありがとうございましたコードは次のとおりです。

CSS

  /* START NAV MENU */

  nav {
  background-color:#333333;
  height:40px;
  width:100%;
  }


  nav ul {
  font-family: Sonoma, Arial;
  font-size: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align:center;
  }

  nav ul li {
  display: inline-block;
  position: relative;

  }

  nav li ul { 
  display: none; 
  }

  nav ul li a {
  display: inline-block;
  text-decoration: none;
  background: #666666;
  color: #ffffff;  
  padding: 5px 20px 3px 15px;
  margin-left: 1px;
  white-space: nowrap;
  height:30px; /* Width and height of top-level nav items */
  width:90px;
  text-align:center;
  border-right: 3px solid black;
  border-left: 3px solid black;

  }

  nav ul li a:hover { 
  background: #999999; 
  }

  nav li:hover ul {
  display: block;
  position: absolute;
  height:30px;
  }

  nav li:hover li {
  float: none;
  font-size: 11px;

  }

  nav li:hover a { 
  background: #534635; 
  height:30px; /* Height of lower-level nav items is shorter than main level */
  }

  nav li:hover li a:hover { 
  background: #999999; 
  }

  nav ul li ul li a {
    text-align:left;
  }

  /* END NAV MENU */

NAVのHTML：

  <nav>
  <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About Us</a>
    <ul>
        <li><a href="/crew">Our Crew</a></li>
        <li><a href="/history">History</a></li>
        <li><a href="/vision">Vision</a></li>
    </ul>
  </li>
  <li><a href="/products">Services</a>
    <ul>
        <li><a href="/carpentry">Carpentry</a></li>
        <li><a href="/waterproof">Waterproofing</a></li>
        <li><a href="/concrete">Concrete</a></li>
        <li><a href="/masonry">Masonry</a></li>
        <li><a href="/prop">Property Maintenance</a></li>
        <li><a href="/metal">Metal Construction</a></li>
        <li><a href="/design">Interior Design</a></li>
        <li><a href="/demo">Demo & Salvage</a></li>
    </ul>
  </li>
  <li><a href="/services">Portfolio</a>
  </li>          
  <li><a href="/contact">Contact</a>
    <ul>
        <li><a href="/email">Via Email</a></li>
        <li><a href="/contact_form">Web Form</a></li>
        <li><a href="/pigeon">Carrier Pigeon</a></li>
    </ul>
  </li>
  </ul>
  </nav>

これを実現するための変更点と、なぜ変更されるのかを説明していただければ幸いです。

4

3 に答える 3

2

フローティングは確かに1つのオプションですが、インラインブロックスタイルとそれに関連する利点を維持できるため、より好ましいオプションが他にもあります。

Chris Coyierの記事「インラインブロック要素間のスペースとの戦い」http://css-tricks.com/fighting-the-space-between-inline-block-elements/はそれぞれの詳細を示していますが、要約すると、これはクロージング間の空白が原因です。</li>そして次の<li>。

オプションは次のとおりです。

</li>各リストアイテムからクロージングを削除します。

<li><a href="/crew">Our Crew</a>
<li><a href="/history">History</a>
<li><a href="/vision">Vision</a>

これは有効なHTML5であり、何も壊れません。

空白を削除して、リストのマークアップがほぼすべて1行になるようにします

<li><a href="/crew">Our Crew</a></li><li><a href="/history">History</a></li>
    <li><a href="/vision">Vision</a>

空白をコメントアウトする

<li><a href="/crew">Our Crew</a></li><!--
--><li><a href="/history">History</a></li><!--
--><li><a href="/vision">Vision</a></li>

親のフォントサイズを0に設定します

ul {
    font-size: 0;
}

ギャップを埋めるために負の右マージンを設定します

a {
    margin-right: -4px;
}

個人的には、他のタグが乱雑でフォントサイズが乱雑に見えるため、終了タグを削除することを好みます。相対サイズを使用する場合、0はあまりうまく機能しませんが、それはあなた次第です。

于 2013-01-23T19:26:23.280 に答える
1

<li>display：inline-block;の代わりに'sを左にフロートさせる必要があります。

 nav ul li {
  float: left; 
  position: relative;

  }

width:のを計算して修正<ul>し、メニューを中央に配置する必要があります。<ul>margin: 0 auto;

nav ul {
width: calculated-width
margin: 0 auto
}
于 2013-01-23T18:16:00.173 に答える
0

マージンプロパティに負の値を使用する

margin-right: negative val;
于 2017-02-20T11:36:45.497 に答える