我带着更多问题回来了!
这可能是非常简单的事情,但它让我感到困惑。我有一个布局设置,以便页面和帖子 (Wordpress) 上的 H2 文本在两侧旁边都有一个背景图像,这是通过使用 span:before 和 span:after 完成的。
这是它如何正确工作以及我希望整个 CSS 实现的目标:
http://www.weburton.co.uk/content/demo/?page_id=121
目前这是通过 CSS 中的 min 和 max-widths 实现的。我已经将宽度部分设置为自动,它位于具有页面宽度的父元素下。我不明白线条如何不会根据 H2 的宽度自动调整大小。看,这里的问题:
http://www.weburton.co.uk/content/demo/?p=36
这是使用的 CSS:
#pagewrapper{
width: 960px;
margin: 0 auto;
position: relative;
padding-top: 140px;
text-transform: uppercase;
}
h2 span:before{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll left center transparent;content:" ";height:1px;margin-right:15px; left: 0%; position:absolute; margin-top: 15px; min-width: 25%; max-width: 50%; width: auto; }
h2 span:after{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll right center transparent;content:" ";height:1px; margin-left:15px; right: 0%; position:absolute; min-width: 25%; max-width: 50%; width: auto; margin-top: 15px; }
基本上,我已经用尽了所有我能想到的选项。有没有我在这里遗漏的东西,或者是否有另一种方法可以使用其他东西来实现这种样式,但 span 更容易?
哦,我知道我有一些多余的样式调用,我正在清理它。 :)
提前致谢! :)
最佳答案
也许这就是你想要的
从h2 span:before
和h2 span:after
中移除min-width
和max-width
h2 span {
position:relative;
}
h2 span:before {
left: -25%;
width: 20%;
}
h2 span:after {
right: -25%;
width: 20%;
}
关于css - H2 跨度背景 - 宽度 : Auto not working as it should,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11704498/