0

我有一个带有（一个小方块）的h3标签，因为我想要一条延伸到其余宽度的线。:before:after

:before和都:after设置为display:inline-block，以便我可以设置宽度和高度。

将换行符设置width:100%为:after新行

看看这里

http://jsfiddle.net/CTd2w/81/

ps 我可以使用 JavaScript 解决方案

4

3 回答 3

2

这是一个不使用:beforeand的解决方案:after。见：http: //jsfiddle.net/Wexcode/CTd2w/83/

HTML：

<h3><span>Aktuell</span></h3>

CSS：

h3 {
    border: 0px solid #860d0f;
    border-bottom-width: 1px;
    height: 13px;
}
span {
    background: #fff url(images/logo_square.jpg) 0 50%;
    font-size: 14px;
    color: #860d0f;
    text-transform: uppercase;
    padding: 0 5px 0 14px;
}
于 2011-06-15T17:58:35.087 回答
1

这是一种 hacky JavaScript/jQuery 解决方案，但它确实有效。

http://jsfiddle.net/CTd2w/82/

var h3AfterCalculatedWidth = 
    $('h3').width()        /* total h3 width */
    - $('h3 span').width() /* nested span to determine text width */
    - 14                   /* :before width + margin */ 
    - 5                    /* :after margin */;

$('head').append('<style' + '>h3:after {width: ' + h3AfterCalculatedWidth + 'px!important}<' + '/style>');

!important应该是不必要的，但无论如何都包括在内

于 2011-06-15T17:57:07.183 回答
-1

当您在元素上设置 display:inline-block 时，该元素的宽度会变得与格式化元素所需的一样大，除非元素设置了其宽度，在这种情况下该算法不适用 - 您设置宽度，就是这样。在 CSS 规范中查找“缩小以适应算法”以获取完整的详细信息。所以当你说 width:100% 你保证换行。

不知道你能不能解决这个问题...

于 2011-06-15T17:26:29.283 回答