0

（小さな正方形）のh3タグがあり、残りの幅に伸びる線が欲しいので。:before:after

:beforeとの両方:afterがに設定されてdisplay:inline-blockいるので、幅と高さを設定できます。

width:100%新しい行への:afterブレークの設定

こちらをご覧ください

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

psJavaScriptソリューションで大丈夫です

4

3 に答える 3

2

:beforeとを使用しないソリューションは次のとおり: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

これはちょっとハッキーな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仕様の「shrinktofitアルゴリズム」を参照してください。したがって、width：100％と言うと、改行が保証されます。

この問題を解決できるかどうかわからない...

于 2011-06-15T17:26:29.283 に答える