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

首页课程实战体系课手记专栏慕课教程

来源：4-3 编程练习

hkyzd888

2019-02-08 23:20:38

<!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>

写回答

3回答

好帮手慕星星

2019-02-17

你好，在英文字母中：

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

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

自己试一下。

hkyzd888

h 哦哦，好的

h019-02-17

共1条回复

好帮手慕星星

2019-02-11

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

整体内容没有居中显示也没有垂直居中显示，代码中是不需要设置成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://climg.mukewang.com/59c21bae000157fa01000059.jpg"/>
            <span class="one">CSS层叠样式表 </span>
            <span class="two">(Cascading Style Sheet)</span>
        </p>
    </div>
</body>

</html>

自己可以测试下，祝学习愉快！