CSS / HTML奇怪的LI间距

时间:2017-08-09 01:12:00

标签: html css html5 css3

我有一个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元素,但它们的高度都相同。有人能帮助我吗?

3 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

这种情况正在发生,因为您明确定义了列表项的宽度。删除宽度并使用填充分隔列表项。 (可选)删除最后一个列表项上的任何填充,因为您不需要它。

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>

答案 2 :(得分:0)

您应该将<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>文本左侧和右侧的标准填充来保持均匀的间距,而不是注入类来推动单个元素