html – 带有跨度的下划线断点有填充或边距

概述如何保持< a>当有< span>时,标记下划线从左到右运行而没有任何中断内部标签,左/右填充或边距设置？了解为什么会发生这种情况也会有所帮助？ 我可能会使用盒子阴影或边框底部,但我不是在寻找那些解决方案. span { padding-right: 10px;} <a href="#"> <span><</span> <span>Previous page</span></ 如何保持< a>当有< span>时,标记下划线从左到右运行而没有任何中断内部标签,左/右填充或边距设置？了解为什么会发生这种情况也会有所帮助？

@H_419_8@

我可能会使用盒子阴影或边框底部,但我不是在寻找那些解决方案.@H_419_8@

@H_419_8@

span {  padding-right: 10px;}

<a href="#">  <span>&lt;</span>  <span>PrevIoUs page</span></a>

解决方法 在您的情况下,填充将在两个文本之间添加10px空间,因此我们可以使用字母间距与第一个跨度来创建此空间.

@H_419_8@

如果您参考specification,您可以阅读：@H_419_8@

@H_419_8@

Underlines,overlines,and line-throughs are applIEd only to text
(including white space,letter spacing,and word spacing): margins,
borders,and padding are skipped@H_419_8@

span:first-child {  letter-spacing: 10px;}

<a href="#">  <span>&lt;</span>  <span>PrevIoUs page</span></a>

为了使这更通用,我们可以考虑使用伪元素的字母间距来模拟跨度之间的空间：@H_419_8@

顺便说一下,不要忘记考虑在某些情况下已经存在的空白[如上所述].@H_419_8@

@H_419_8@

.first span:after {  content:" ";  letter-spacing: 15px;}.second span:after {  content:" ";  letter-spacing: 30px;}span:last-child::after {  display:none;  /* no need for last child*/}

<a href="#">  <span>aa</span>  <span>bb</span>  <span>cc</span></a><br><a href="#"><span>aa</span><span>bb</span><span>cc</span></a><br><a href="#" >  <span>aa</span>  <span>bb</span>  <span>cc</span></a><br><a href="#" ><span>aa</span><span>bb</span><span>cc</span></a><br><a href="#" >  <span>aa</span>  <span>bb</span>  <span>cc</span></a>

总结

以上是内存溢出为你收集整理的html – 带有跨度的下划线断点有填充或边距全部内容，希望文章能够帮你解决html – 带有跨度的下划线断点有填充或边距所遇到的程序开发问题。

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