行内块元素加了文字会被挤下来的原因及解决方法。

最新推荐文章于 2023-07-27 10:53:07 发布

斯特拉如是说

最新推荐文章于 2023-07-27 10:53:07 发布

阅读量1.7k

点赞数 3

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_41628626/article/details/120413380

版权

代码：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .nav{
            text-align: center;
        }
       .nav a{
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color:#F7F7F7;
            border:1px solid #cccccc;
           text-align: center;
           line-height: 40px;
           text-decoration: none;
           font-size: 5px;
           color: #333;
        }
    </style>

</head>
<body>
    <div class="nav">
        <a href="#">&nbsp;</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#"></a>
        <a href="#"></a>
    </div>
</body>
</html>

结果图：
在这里插入图片描述

原因：

行内块元素的默认对齐方式是：与文字的基线对齐。
元素加入文字，导致没有加入文字的行内块元素对齐到文字的基线。

解决方法：

方法1.修改行内块元素对齐方法：加入：vertical-align ：bottom,
方法2：没有文字的元素加入

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

斯特拉如是说

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
行内块元素加了文字会被挤下来的原因及解决方法。

代码：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title> <style> .nav{ text-align: center; } .nav a{ display: inline-block
复制链接

扫一扫