CSS/HTML奇怪的L1间距

我有一个HTML5头设置。它使用链接的<ul>和<li>元素。CSS/HTML奇怪的L1间距

这是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>上使用了检查元素，但他们都是一样的高度。有人能帮我吗？

来源

2017-08-09 Infrared

你需要一些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; 
}

来源

2017-08-09 01:21:16

发生这种情况是因为您明确定义了列表项的宽度。取消宽度并改为使用填充分隔列表项目。或者，删除最后一个列表项上的任何填充，因为您不需要它。

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>

来源

2017-08-09 01:19:54 eulloa

你应该把<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>文本的左侧和右侧使用标准填充以保持一致的间距，而不是注入类来推动单个元素。

来源

2017-08-09 01:24:51

CSS/HTML奇怪的L1间距

回答

相关问题