Question

我回来了更多的问题！

这可能是非常简单的事情，但它让我感到很困惑。我有一个布局设置，以便页面和帖子（Wordpress）上的H2文本在两侧都有一个背景图像，通过使用span：before和span：after完成。

以下是它如何正常工作以及我希望整体CSS实现的目标：

http://www.weburton.co.uk/content/demo/?page_id=121

目前通过CSS中的min和max-width实现。我将宽度部分设置为auto，它位于具有页面宽度的父元素下。我不明白线条是如何根据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; }

基本上，我已经用尽了所有我能想到的选择。有没有我在这里缺少的东西，还是有另一种方法可以使用其他东西来实现这种样式，但跨度更容易？

哦，我知道我有一些多余的样式调用，我正在清理它。 :)

提前致谢！：）

Answer 1

没有小提琴，很难给你一个明确的答案，但我认为如果你尝试将显示属性更改为display: inline-block，它应该可以解决问题。

这将导致元素充当块元素，同时仍然以内联方式显示（因此保留当前布局 - 块元素通常占用整个可用宽度，然后是换行符。）

Answer 2

可能就是你想要的

从min-width和max-width

移除h2 span:before和h2 span:after

h2 span {
    position:relative;   
}
h2 span:before {
    left: -25%;
    width: 20%;
}
h2 span:after {
    right: -25%;
    width: 20%;
}

H2跨度背景 - 宽度：自动无法正常工作

2 个答案: