问题...
我再次寻找一个很酷的 CSS 技巧来帮助我实现一种效果,同时防止使用不整洁的 HTML...
下图显示了我正在努力实现的目标,请注意顶部和底部边框仅拉伸(stretch)宽度的 70% 左右...
起点
作为起点,我创建了上面的内容,使用我称之为“不整洁的 HTML”的内容将这些分隔符添加到列表中。
这是我的 jsFiddle:http://jsfiddle.net/E93UE/
你会看到我有 <li class="divider><!-- Divider --></li>
, 如果可能的话,这是我想摆脱的东西
我的问题
所以,如果上面的解释不够好,我想给 block 元素应用边框,但只显示整个元素的特定宽度的边框。
显然这不能仅使用 border:XXX
来实现, 它可能需要一些 :before
和 :after
选择器...
可能的解决方案...
关于如何实现,我有过两种想法,一种不太实用,另一种我不太确定如何实现(这些只是想法):
- 设置列表元素的宽度,给
overflow:visible
,其中的所有元素都有position:absolute
然后只需应用边距即可将元素带出列表框...(不是很好的解决方法,更喜欢我的原始内容) - 我不太确定如何实现的另一个解决方案可能是可行的方法。通过申请两个
:before
带有position:absolute
的元素你可以覆盖每个边框的边缘(我认为)
最佳答案
给 :after
伪元素加上边框 ( demo ):
.separated:after {
content: "";
display: block;
width: 70%;
margin: 1em auto 0;
border-bottom: solid;
}
关于html - 如何仅将边框添加到元素宽度的百分比,CSS 技巧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17486209/