老师，您看我实现的效果对吗，为啥我的下划线会显示不完整，是行高的事吗？

<!DOCTYPE html>

<html>

<head>

div{background-color:#eee;

font-size:2em;

line-height:5em;

text-align:center;

}

div p{font-size:2em;

display:table;

}

span{color:red;

font-size:50%;

text-decoration:underline;

display:table-cell;

vertical-align:middle;

}

</style>

</head>

<body>

<div>

<p>

CSS层叠样式表 <span>(Cascading Style Sheet)</span>

</p>

</div>

</body>

</html>

hkyzd888 2019-02-08

源自：CSS文本样式 4-3 编程练习

收起

3回答

好帮手慕星星 2019-02-17 10:18:07

你好，在英文字母中：

g和y是在下面两格中显示的，而下划线是显示在基线上，也就是第三条线，所以g和y会超出。

这样显示没有问题，可以使用border边框实现下划线，参考：

自己试一下。

收起回答

提问者 hkyzd888 #1

哦哦，好的

2019-02-17 10:26:34

好帮手慕星星 2019-02-11 14:48:15

你好，下划线断断续续的是浏览器解析的问题，可以使用火狐浏览器测试下：

整体内容没有居中显示也没有垂直居中显示，代码中是不需要设置成table元素的，三个内容都使用vertical-middle属性即可，如下：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style type="text/css">
    p {
        background-color: #eee;
        font-size: 2em;
        line-height: 5em;
        text-align: center;
    }
 
    .one {
        font-size: 2em;
    }
 
    .two {
        color: red;
        text-decoration: underline;
    }
 
    img,
    .one,
    .two {
        vertical-align: middle;
    }
    </style>
</head>
 
<body>
    <div>
        <p>
            <img src="http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg"/>
            <span class="one">CSS层叠样式表 </span>
            <span class="two">(Cascading Style Sheet)</span>
        </p>
    </div>
</body>
 
</html>