均匀间隔，对齐水平导航链接：如何删除空的垂直空间：内容后 [英] Evenly spaced, justified horizontal nav links: How to remove vertical space in empty :after content

问题描述

我试图实现这样的水平导航链接：

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

规则：

• 链接均匀分布（每个链接之间的空格大小相同）


• 链接可以是可变宽度的




• 第一个和最后一个链接与其容器的链接对齐（链接是对齐的）


• 适用于IE8 +


• CSS / HTML解决方案，无JavaScript


• 无法设置特定容器高度或链接高度


• 无法预先计算和硬编码链接之间的空格（链接数可能稍后更改）

此解决方案几乎工程 - 它是如此接近。但引入空：后内容在nav容器中添加了不必要的额外垂直空间（为什么？）。有没有办法删除由空的：after内容注入的额外垂直空间？

几乎可以工作的HTML：

 < ul id =nav> 
< li>< a href =＃>首页< / a>< / li& < / a>< / li>< / b>< / a>< < / a>< / li>< / a>< / b>< <！ -  
  - >< li>< a href =＃>我们的员工< / a>< / li> < / a>< / li><！ -  
  - >< / a> ;< / ul><！ -  
  - >< h2>下一个元素< / h2> 
  

几乎可以使用的CSS：

  * {
 padding：0; 
 margin：0; 
} 
 #nav {
 text-align：justify; 
 outline：1px solid gray; 
} 
 #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 ，显示这是什么样子，以及由：after内容注入的额外垂直空间。 下一个元素应该位于导航链接的正下方。非常感谢。

解决方案

奇怪的问题。

关于内联元素尊重标记中的空白的事实，虽然空白对于 text-align：justify 是必要的，因此它不能被删除。 / p>

由于空格由字体大小决定，因此您可以将父项的 font-size 设置为 0 ，然后相应地设置子元素 font-size 。它的工作原理.. jsFiddle示例

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

目前无法想到更好的东西。如果我这样做，我会让你知道。

I'm trying to achieve horizontal navigation links like this:

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

Rules:

• Links are evenly spaced (same amount of white space between each link)
• Links can be variable-width
• Collectively the links stretch across the entire available width of their container
• First and last links are lined up with the eges of their container (links are justified)
• Works on IE8+
• CSS/HTML solution, no JavaScript
• Can not set a specific container height or link height
• Can not pre-calculate and hard-code the space between the links (number of links could change later)

This solution almost works--it's so close. But introducing the empty :after content adds unwanted additional vertical space in the nav container (why?). Is there a way to remove the extra vertical space injected by the empty :after content?

HTML that almost works:

<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 that almost works:

* {
    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 showing what this looks like, as well as the extra vertical space injected by the :after content. The "next element" should be directly below the nav links. Thanks.

解决方案

Strange issue.

I assume it has something to do with the fact that inline elements respect whitespace in the markup, though the whitespace is necessary for text-align:justify to work, thus it can't be removed.

Since the whitespace is determined by the font's size, you can set the parent's font-size to 0, and then set the children's font-size accordingly. It works.. jsFiddle example

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

Can't think of anything better at the moment. I will let you know if I do.

这篇关于均匀间隔，对齐水平导航链接：如何删除空的垂直空间：内容后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！