1

我正在尝试设置网站的一部分，其样式运行到某些文本的每一侧。您可以在此处查看我从 PSD 文件中截取的屏幕截图 --> http://screencast.com/t/84RCLRdSZT，其中红色箭头指向我发现难以解决的问题区域。

知道该怎么做吗？

这是我的开始：

<div class="box">
    <h2>Some text here</h2>
</div>

和CSS：

.box {
  width:400px;
  height:200px;
  text-align:center;
  background:yellow;
}

h2:after,h2:before{
  content:"";
  border:5px double purple;
}

这是小提琴-> http://jsfiddle.net/HerrLoop/g63LB/1/

如您所见，条纹是垂直的，而不是您在我的初始屏幕截图中看到的水平。

4

2 回答 2

3

这不是很完美，需要您在前后元素上设置固定宽度（如果需要响应，我能想到的最好的方法是使用 JavaScript），但这里是：

h2{
    display:inline-block;
    vertical-align:middle;
}
h2:after,
h2:before{
    content:"";
    margin:0px 20px;
    border:1px solid #000;
    border-left: 0px;
    border-right:0px;
    height:5px;
    width:50px;
    display:inline-block;
    vertical-align:middle;
}

http://jsfiddle.net/daCrosby/g63LB/2/

编辑

这有点反应灵敏，但在小尺寸时仍然会被切断，并且在其他尺寸下看起来不成比例：

.box {
    width:50%;
    overflow:hidden;
}
h2{
    display:inline-block;
    vertical-align:middle;
    width:100%;
    white-space:nowrap;
}
h2:after,
h2:before{
    content:"";
    margin:0px 20px;
    border:1px solid #000;
    border-left: 0px;
    border-right:0px;
    height:5px;
    width:20%;
    display:inline-block;
    vertical-align:middle;
}

http://jsfiddle.net/daCrosby/g63LB/3/

于 2013-07-07T06:11:36.843 回答
2

尝试此处描述的解决方案：http: //kizu.ru/en/fun/legends-and-headings/

快速演示：

h2{
    overflow-x: hidden;
    white-space: nowrap;
    text-align: center;
}
h2:before, h2:after {
    content: "";
    border: solid #000;
    border-width: 1px 0;
    height: 5px;
    width: 50%;
    display: inline-block;
    vertical-align: middle;
}
h2:before { margin: 0 .5em 0 -50%; }
h2:after { margin: 0 -50% 0 .5em; }
于 2013-07-07T10:06:00.223 回答