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>上使用了inspect元素，但它们的高度都相同。有人能帮助我吗？

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>，但该类不在您的CSS中。您应该使<li>'固定宽度并使文本居中，或者使用<li>文本左侧和右侧的标准填充来保持均匀的间距，而不是注入类来推动单个元素

CSS / HTML奇怪的LI间距

3 个答案: