我想在标题之前和之后创建一个行分隔符。线条和文字必须具有透明背景才能将它们放置在带纹理的背景上。
我想尝试采用这种方法: Line before and after title over image
但是,我的线条在顶部和底部而不是左右:
<div class="widget widget-catalogsale-products">
<div class="page-title category-title">
<h1>Special products</h1>
</div>
</div>
.widget.widget-catalogsale-products {display: block;}
.widget-catalogsale-products {
background: url(../images/widget-catalogsale-products.gif) repeat left top;
margin-left: -500px;
padding-left: 500px;
margin-right: -500px;
padding-right: 500px;
padding-top: 106px;
padding-bottom: 50px;
margin-bottom: 46px;
}
.widget-catalogsale-products .page-title h1 {
color: #548891;
width:100%;
margin:0 auto;
overflow:hidden;
text-align:center;
line-height:1.2em;
}
.widget-catalogsale-products .page-title h1:before,
.widget-catalogsale-products .page-title h1:after {
content:'';
vertical-align:top;
display:inline-block;
width:50%;
height:0.65em;
border-bottom:7px solid #e3edef;
margin:0 2% 0 55%;
}
.widget-catalogsale-products .page-title h1:after {
margin:0 55% 0 2%;
}
.widget-catalogsale-products .price-box .price-label {display:none;}
.widget-catalogsale-products .mini-products-list .product-name {margin-left: 0;}
.widget-catalogsale-products .product-name {margin-bottom: 5px;}
.widget-catalogsale-products .block-content li.item { border: 0; padding:0 0 25px 0; }
.widget-catalogsale-products .products-grid {margin-bottom: 0;}
.widget-catalogsale-products .products-grid .product-image {padding: 5px; border: 0;}
.widget-catalogsale-products .products-grid .product-image:before {border-width: 5px; border-color: #D2B696;}
.widget-catalogsale-products .products-grid .product-name a {color: #fff;}
有人能在我的CSS中找到错误吗? http://jsfiddle.net/6o9m30tv/
答案 0 :(得分:2)
您的保证金中缺少逗号/减号。改变它:
.widget-catalogsale-products .page-title h1:after {
content:'';
vertical-align:top;
display:inline-block;
width:50%;
height:0.65em;
border-bottom:7px solid #e3edef;
margin:0 2% 0 -55%;
}
.widget-catalogsale-products .page-title h1:after {
margin:0 -55% 0 2%;
}
答案 1 :(得分:0)
似乎你设置的边距大小导致伪元素突破到下一行..
这是一个片段,我是如何对齐和我注释掉的代码
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body{
background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);
background-repeat:no-repeat;
background-size:100% auto;
font-family: 'Open Sans', sans-serif;
}
.widget.widget-catalogsale-products {display: block;}
.widget-catalogsale-products {
background: url(../images/widget-catalogsale-products.gif) repeat left top;
margin-left: -500px;
padding-left: 500px;
margin-right: -500px;
padding-right: 500px;
padding-top: 106px;
padding-bottom: 50px;
margin-bottom: 46px;
}
.widget-catalogsale-products .page-title h1 {
color: #548891;
width:100%;
margin:0 auto;
overflow:hidden;
text-align:center;
line-height:1.2em;
}
.widget-catalogsale-products .page-title h1:before,
.widget-catalogsale-products .page-title h1:after {
content:'';
vertical-align:top;
display:inline-block;
width:20%;
height:0.65em;
border-bottom:2px solid #e3edef;
/*margin:0 2% 0 55%;*/
}
/*.widget-catalogsale-products .page-title h1:after {
margin:0 55% 0 2%;
} */
.widget-catalogsale-products .price-box .price-label {display:none;}
.widget-catalogsale-products .mini-products-list .product-name {margin-left: 0;}
.widget-catalogsale-products .product-name {margin-bottom: 5px;}
.widget-catalogsale-products .block-content li.item { border: 0; padding:0 0 25px 0; }
.widget-catalogsale-products .products-grid {margin-bottom: 0;}
.widget-catalogsale-products .products-grid .product-image {padding: 5px; border: 0;}
.widget-catalogsale-products .products-grid .product-image:before {border-width: 5px; border-color: #D2B696;}
.widget-catalogsale-products .products-grid .product-name a {color: #fff;}
&#13;
<div class="widget widget-catalogsale-products">
<div class="page-title">
<h1>Special products</h1>
</div>
</div>
&#13;