Question

当我将'border-bottom'应用于'span'元素以加下划线时，如果'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>

Answer 1

将display:block;添加到您的范围或将范围转换为div。

<强> jsFiddle example

或 ...使用display：inline-block;

<强> jsFiddle example

Answer 2

span.underline {
                font-size: 20px;
                text-decoration: underline;
            }

Answer 3

span { border-bottom: 1px solid; }

Fiddle up

Answer 4

如果只是强调文字是不够的...... {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>

加下span元素

4 个答案: