因此,我使用的是zurb的粉底,并且尝试完成上述图像的设计。我想出了几种不同的方法,但是最可靠的方法就是这样。
.large-2.columns
%h3 Our Products
.large-10.columns
.arrow
如您所见,这将使“我们的产品”和“关于我们”部分的箭头宽度相同。我正在寻找的是确保满足这些需求的最有效方法:
箭头和h3是可变宽度
箭头的质量不会随着宽度的变化而改变(线/箭头/等都具有相同的宽度)
优选地,没有标记的吨或无礼的吨。
谢谢!
最佳答案
我建议使用:before和:after伪元素(以及内容)来实现这一点。除非您需要支持IE6 / 7,否则我想您将不得不做一些更难看的事情。
请记住::before在目标元素内插入内容(但要在目标元素内的任何子元素之前,而:after元素也是如此-只是它将在任何子元素之后注入内容)。但是,如果我们使用绝对定位,我们仍然只能使用一个小时元素。
CSS:
h3 {
font-size: 0.85em;
float: left;
}
hr {
clear: none;
background-color: #fff;
margin-top: 0.75em;
border-style: solid;
border-color: green;
border-width: 0 0 1px 0;
}
hr:before {
content: '';
position: absolute;
background-color: red; /* can remove this, only for testing */
display: block;
width: 20px;
height: 10px;
margin-top: -5px;
background-position: 0 0; /* set to correct pos for your sprites.gif background-image */
}
hr:after {
position: absolute;
background-color: red; /* can remove this, only for testing */
right: 0.9375em;
content: '';
display: block;
width: 10px;
height: 10px;
margin-top: -5px;
background-position: 0 0;
}
的HTML
<div class="row">
<div class="large-12 columns">
<h3>OUR PRODUCTS</h3><hr>
</div>
</div>
对箭头使用背景图像精灵,并放置正确的x y坐标。 (背景颜色:红色只是为了证明这是可行的)