6

问题...

我再次在寻找一个很酷的 CSS 技巧来帮助我实现效果，同时防止使用不整洁的 HTML...

下图显示了我正在尝试实现的目标，请注意顶部和底部边框仅延伸大约 70% 的宽度...

百分比宽度边框

起点

作为起点，我使用我称之为“untidy HTML”的内容创建了上述内容，以将这些分隔符添加到列表中。

这是我的 jsFiddle：http: //jsfiddle.net/E93UE/

你会看到我有<li class="divider><!-- Divider --></li>，如果可能的话，这就是我想要摆脱的东西

我的问题

所以，如果上面的解释不够好，我想为块元素应用边框，但只显示整个元素特定宽度的边框。

显然这不能使用 just 来实现border:XXX，它可能需要一些:before和:after选择器......

可能的解决方案...

我对如何实现这一点有两个想法，一个不太实用，另一个我不太确定如何实现（这些只是想法）：

  1. 设置列表元素的宽度并给出它overflow:visible，其中的所有元素都具有position:absolute然后只应用边距以将元素带出列表框......（不是一个好的修复，更喜欢我的原始）
  2. 我不太确定如何实施的另一种解决方案可能是要走的路。通过应用两个:before元素，position:absolute您可以覆盖每个边框的边缘（我认为）
4

2 回答 2

16

给:after伪元素（demo）一个边框：

.separated:after {
    content: "";
    display: block;
    width: 70%;
    margin: 1em auto 0;
    border-bottom: solid;
}
于 2013-07-05T10:23:40.720 回答
6

:before我使用/:after伪元素重新创建了您的分隔线：

http://jsfiddle.net/thirtydot/E93UE/1/

#staff_list li:first-child:before, #staff_list li:after {
    content: '';
    display: block;
    margin: auto;
    position: relative;
    bottom: -26px;
    width: 500px;
    height: 2px;
    background: #b9b7b6;
}
#staff_list li:first-child:before {
    top: -14px;
    bottom: auto;
}

数字需要调整，当你有更多文本时你需要测试它，但它可能已经足够接近了。我进行了其他更改以帮助此解决方案工作，将您的原始演示与我的进行比较。

于 2013-07-05T10:32:19.057 回答