1

'border-bottom' を 'span' 要素に適用して下線を引くと、'span' に 'vertical-align: middle' で 'image' が含まれている場合、境界線が画像を横切ってしまいます! とにかく「vertical-align: middle」を維持し、「span」の下の境界線を実行する方法はありますか?

<html>
    <head>
        <style type="text/css">
            span.underline {
                font-size: 20px;
                border-bottom: 3px solid grey;
            }
            img.embeddedImage {
                vertical-align: middle;
            }
        </style>
    </head>

    <body>
        <span class="underline"> (a) <img class="embeddedImage" src="logo.gif"></span>
    </body>
</html>
4

4 に答える 4

5

スパンに追加display:block;するか、スパンを div に変換します。

jsFiddle の例。

または...display:inline-block; を使用します。

jsFiddle の例。

于 2012-05-04T17:25:08.603 に答える
2 
span { border-bottom: 1px solid; }​

いじる

于 2012-05-04T17:26:44.853 に答える
2 
span.underline {
                font-size: 20px;
                text-decoration: underline;
            }
于 2012-05-04T17:23:52.363 に答える
0

テキストに下線を引くだけでは不十分な場合... {text-decoration:underline;}

スパンよりも高い z-index を持つようにイメージを設定すると、必要なことが行われますか?

    <style type="text/css">
        span.underline {
            font-size: 20px;
            border-bottom: 3px solid grey;
            z-index: 1;
        }
        img.embeddedImage {
            vertical-align: middle;
            z-index: 2;
        }
    </style>
于 2012-05-04T17:26:21.333 に答える