html – 均匀间隔,对齐的水平导航链接：如何删除空的垂直空间：

发布时间：2020-12-14 19:33:10 所属栏目：资源来源：网络整理

导读：我正在尝试实现这样的横向导航链接： |--------------------------------------| |Link1 L2 LongLink3 Link4 Link5||--------------------------------------| 规则：链接间隔均匀(每个链接之间的空白空间相同) 链接可以是可变宽度集体地,链接可以跨越其容

我正在尝试实现这样的横向导航链接：

|--------------------------------------| 
|Link1   L2   LongLink3   Link4   Link5|
|--------------------------------------|

规则：

>链接间隔均匀(每个链接之间的空白空间相同)
>链接可以是可变宽度
>集体地,链接可以跨越其容器的整个可用宽度
>第一个和最后一个链接与他们的容器的eges排列(链接是对齐的)
>在IE8上工作
> CSS / HTML解决方案,没有JavaScript
>无法设置特定的容器高度或链接高度
>不能预先计算和硬编码链接之间的空间(链接数可能会改变)

This solution几乎工作 – 这么近但是介绍空：后的内容在导航容器中添加不需要的附加垂直空间(为什么？).有没有办法去除空的注入空间的额外垂直空间：内容？

几乎可以工作的HTML：

<ul id="nav">
    <li><a href="#">HOME</a></li>  <!--
    --><li><a href="#">ABOUT</a></li>  <!--
    --><li><a href="#">BASIC SERVICES</a></li>  <!--
    --><li><a href="#">OUR STAFF</a></li>  <!--
    --><li><a href="#">CONTACT US</a></li><!--
--></ul><!--
--><h2>next element</h2>

几乎可以工作的CSS：

* {
    padding: 0;
    margin: 0;
}
#nav {
    text-align: justify;
    outline: 1px solid grey;
}
#nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}
#nav li {
    display: inline-block;
    background-color: green;
}
#nav a:link {
    display: block;
    color: white;
    padding: 1em 0;
}

jsfiddle显示这是什么样子,以及由以下内容注入的额外的垂直空间. “下一个元素”应该在导航链接的正下方.谢谢.

解决方法

奇怪的问题.

我认为这与内联元素在标记中遵循空白的事实有关,尽管空格对于text-align是必要的：对齐工作,因此它不能被删除.

由于空格是由字体的大小确定的,您可以将父代的字体大小设置为0,然后相应地设置子项的字体大小.它工作.. jsFiddle example

#nav {
    text-align: justify;
    outline: 1px solid grey;
    font-size:0;
}
#nav li {
    display: inline-block;
    background-color: green;
    font-size:16px;
}

目前不能想到更好的东西.我会让你知道,如果我这样做.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!