CSS/HTML奇妙なLIの間隔

Question

私はHTML5ヘッダーの設定をしています。リンクには<ul>と<li>要素が使用されます。

これはHTMLです：あなたはナビゲーションバーを見ればあなたは簡単に最初の二つのことを見ることができますhttps://image.prntscr.com/image/w0LAMn5qRMq0OqIAfDTsHw.png ：

<header> 
    <nav> 
     <ul> 
      <a href="/"><li id="logoli"><img src="/assets/logo.png" id="logo"></li></a> 
      <a href="/"><li>Home</li></a> 
      <a href="/"><li class="5px">Roulette</li></a> 
      <a href="/"><li>Free Stuff</li></a> 
     </ul> 
    </nav> 
</header> 

そしてCSS：この問題が発生した何らかの理由

header { 
    height: 100%; 
    width: 100%; 
} 
nav {  
    width: 100%; 
    height: 65px; 
    font-size: 14px; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding-left: 10px; 
    background-color: rgba(0, 0, 0); 
    color: #0077C5; 
} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    float: left; 
} 
li { 
    width: 100px; 
    line-height: 65px; 
    vertical-align: middle; 
    text-align: center; 
    margin: 0; 
    text-align: center; 
     display: inline; 
    list-style: none; 
    float: left; 
} 
#logo { 
    height: 50px; 
} 
#logoli { 
    padding-top: 7px; 
    width: 250px; 
} 

要素の間に通常の量の間隔があります。しかし、セコンドとセカンドは奇妙な小さな間隔を持っています。私は<li>のinspect要素を使用しましたが、それらはすべて同じ高さです。誰か助けてくれますか？

Answer 1

あなたは、いくつかのHTMLとCSSの修正は、anchorsliの要素をラップ必要との問題は、あなたがこの奇妙な間隔を起こしliに幅を述べてきたました。

HTML

<header> 
    <nav> 
     <ul> 
      <li id="logoli"> 
       <a href="/"><img src="/assets/logo.png" id="logo"></a></li> 
      <li><a href="/">Home</a></li> 
      <li class="5px"><a href="/">Roulette</a></li> 
      <li><a href="/">Free Stuff</a></li> 
     </ul> 
    </nav> 
</header> 

CSS

header { 
    height: 100%; 
    width: 100%; 
} 
nav {  
    width: 100%; 
    height: 65px; 
    font-size: 14px; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding-left: 10px; 
    background-color: rgba(0, 0, 0); 
    color: #0077C5; 
} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    float: left; 
} 
li { 
    line-height: 65px; 
    vertical-align: middle; 
    text-align: center; 
    margin:0px 10px; 
    text-align: center; 
    display: inline; 
    list-style: none; 
    float: left; 
} 
#logo { 
    height: 50px; 
} 
#logoli { 
    padding-top: 7px; 
    width: 250px; 
} 

Answer 2

これは、リスト項目の幅を明示的に定義しているために起こります。幅を削除し、代わりにリスト項目をパディングで区切ります。必要に応じて、最後のリストアイテムのパディングを削除することもできます（オプション）。

li { 
    /* width: 100px; */ 
    padding-right: 1em; 
    line-height: 65px; 
    vertical-align: middle; 
    text-align: center; 
    margin: 0; 
    text-align: center; 
    display: inline; 
    list-style: none; 
    float: left; 
} 

li:last-child { 
    padding-right: 0; 
} 

https://jsfiddle.net/eulloa/yx7vkt79/

彼らはあなたのアンカーの親要素ではなく、他の方法で回避しているように、また、あなたのリストの項目を再構築。

<li><a href="/">Home</a></li> <!-- structure your list items this way --> 

<a href="/"><li>Home</li></a> 

Answer 3

あなたはこのよう<li>タグ内<a href>年代を置く必要があります。また

<header> 
    <nav> 
     <ul> 
      <li id="logoli"><a href="/"><img src="/assets/logo.png" id="logo"></a></li> 
      <li><a href="/">Home</a></li> 
      <li><a href="/">Roulette</a></li> 
      <li><a href="/">Free Stuff</a></li> 
     </ul> 
    </nav> 
</header> 

- あなたはのいずれかにclass="5px"を持っています<li>のですが、そのクラスisn 'あなたのCSSで。 <li>を固定幅にしてテキストを中央に配置するか、<li>テキストの左右に標準のパディングを使用して、単一の要素をプッシュするクラスを注入するのではなく、均一な間隔を維持する必要があります。