html – 带有非边界伪元素的边界元素

概述我经常遇到的一个问题是当我有一个像面包屑列表的时候 <ul class="horizontal-list"> <li><a href="/home.html">Here's a link</a></li> <li><a href="/home/subpage.html">Here's another link</a></li> <li>Here's the final li 我经常遇到的一个问题是当我有一个像面包屑列表的时候

<ul >    <li><a href="/home.HTML">Here's a link</a></li>    <li><a href="/home/subpage.HTML">Here's another link</a></li>    <li>Here's the final link</li></ul>

ul.horizontal-List > li { display: inline; border-bottom: 1px solID #000;}ul.horizontal-List > li + li:before { content: ">"; padding: 0 3px;}ul.horizontal-List > li > a { text-decoration: none;}

我希望伪元素不具有其元素所具有的边框或其他属性.添加border-bottom：0;到ul.horizo​​ntal-List>李莉：以前没有达到我的目的.为什么不呢？

这是场景的一个小提琴：http://jsfiddle.net/oboy1a4r/

解决方法 伪元素确实没有任何边框,这意味着设置border-bottom：0什么都不做;但是,因为它们是 part of the originating li elements,所以它们在li元素框内呈现,因此li边框扩展到伪元素.

解决此问题的一个简单方法是将边框应用于子元素而不是li元素.这样,伪元素与有边框一起存在.

如果您还需要最后一个项目也有边框,您可以将其文本包装在span元素中并将边框应用于li> a,li>跨度：

<ul >    <li><a href="/home.HTML">Here's a link</a></li>    <li><a href="/home/subpage.HTML">Here's another link</a></li>    <li><span>Here's the final link</span></li></ul>

…但如果您更喜欢在纯CSS中执行此 *** 作而不使用无关标记,则需要执行此 *** 作

>将伪元素更改为：after伪元素后,
>将伪元素应用于除最后一个li(li：not(：last-child))之外的所有元素,而不是除了第一个(li li)之外的所有li元素,并且
>将边框应用于元素以及最后一个元素.

请记住,使用：last-child将使您的ie8兼容性降低;如果这是一个优先事项,那么你将不得不使用li li的span元素：如上所述.

ul.horizontal-List > li:not(:last-child):after {    content: ">";    padding: 0 3px;}ul.horizontal-List > li > a,ul.horizontal-List > li:last-child {    text-decoration: none;    border-bottom: 1px solID #000;}

Updated fiddle

最后一点,由于所有的框(包括伪元素)都是内联的,因此使用空格而不是填充将是provide consistent spacing between the pseudo-elements and the rest of the text：

ul.horizontal-List > li:not(:last-child):after {    content: " > ";}

(从技术上讲,您不需要尾随空格,因为每个< / li>结束标记之后的换行符为此目的履行了空白角色,但为了保持一致性,您可以将其包括在内,它通常会在collapse中出现.)

总结

以上是内存溢出为你收集整理的html – 带有非边界伪元素的边界元素全部内容，希望文章能够帮你解决html – 带有非边界伪元素的边界元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。