CSS/HTML奇怪的L1間距

Question

我有一個HTML5頭設置。它使用鏈接的<ul>和<li>元素。

這是HTML：

<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; 
} 

出於某種原因，發生這種情況：https://image.prntscr.com/image/w0LAMn5qRMq0OqIAfDTsHw.png 如果你看一下導航欄，你可以很容易地看到，前兩個元素之間具有正常的間距量。但第二和第三有很奇怪的小間距。我在<li>上使用了檢查元素，但他們都是一樣的高度。有人能幫我嗎？

Answer 1

你需要一些HTML和CSS修復，包裹anchors在li元素和問題是你提到的寬度爲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

你應該把<a href>的的<li>標籤內是這樣的：

<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>的，但該類不是' t在你的CSS。您應該使<li>的寬度固定並使文本居中，或在<li>文本的左側和右側使用標準填充以保持一致的間距，而不是注入類來推動單個元素。