0

我带着更多问题回来了！

这可能是一件非常简单的事情，但它把我搞糊涂了。我有一个布局设置，以便页面和帖子（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; }

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

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

提前致谢！:)

4

2 回答 2

0

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

这将导致元素充当块元素，同时仍内联显示（从而保留您当前的布局 - 块元素通常占据整个可用宽度，并且后跟换行符）。

于 2012-07-28T20:50:10.893 回答
0

可能这就是你想要的

从 和中删除min-width和max-widthh2 span:beforeh2 span:after

h2 span {
    position:relative;   
}
h2 span:before {
    left: -25%;
    width: 20%;
}
h2 span:after {
    right: -25%;
    width: 20%;
}
于 2012-07-28T21:06:50.277 回答