css 问题，inline-block的两个元素上下不对齐？

发布于 2022-09-03 12:51:19 字数 2991 浏览 22 评论 0

这个域名后缀这几个字有点下去了

<!DOCTYPE html>

    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>字体测试</title>
            <style>
                * {
                    padding: 0;
                    margin: 0;
                    box-sizing: border-box;
                }
                a {
                    text-decoration: none;
                }
                ul {
                    list-style: none;
                }
                body {
                    padding-top: 20px;
                }
                .find{
                    background-color: #fff;
                    text-align: center;
                    margin-top: 46px;
                 
                }
                .find .find-txt {
                    display: inline-block;
                    font-size: 20px;
                }
                .find ul {
                    overflow: hidden;
                    display: inline-block;
                    margin: 0;
                }
                .find ul li {
                    float: left;
                    margin-right: 15px;
                    color: #d61d2f;
                    text-align: center;
                }
    
                .find ul li a {
                    display: block;
                    text-indent: 0;
                    text-decoration: none;
                    font-size: 20px;
                    color: #7E8581;
                }
                .find ul li a.cur{
                    color:#d61d2f;
                }
    
            </style>
        </head>
    
        <body>
            <form id="searchForm" action="/buy/" class="find">
                <div class="find-txt">域名后缀：</div>
                <ul id="ym">
                    <li> <a class="cur" href="javascript:void(0)" data-data="">全部</a></li>
                    <li> <a href="javascript:void(0)" data-data=".com">.com</a></li>
                    <li> <a href="javascript:void(0)" data-data=".net">.net</a></li>
                    <li> <a href="javascript:void(0)" data-data=".org">.org</a></li>
                    <li> <a href="javascript:void(0)" data-data=".cn">.cn</a></li>
                    <li> <a href="javascript:void(0)" data-data=".com.cn">.com.cn</a></li>
                    <li> <a href="javascript:void(0)" data-data=".cc">.cc</a></li>
                    <li> <a href="javascript:void(0)" data-data=".me">.me</a></li>
                 </ul>
            </form>
        </body>
    
    </html>

明明a元素的字体大小和div大小一样啊

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

勿忘初心 2022-09-10 12:51:19

上面已经说了是基线对其问题，进一步来说，两个 inline-block 的元素都按照默认的垂直对齐方式为什么会产生不同的对齐效果？原因在于其中一个元素使用了 overflow: hidden 属性，这一属性改变了 inline-block 元素的基线位置，导致这一元素上移。

因此，同时设置两个元素的垂直对齐方式为非基线对齐的值，或为另一个元素添加 overflow 属性都可以解决这一问题。

回复收藏 0

烟沫凡尘 2022-09-10 12:51:19

.find .find-txt {
    display: inline-block;
    font-size: 20px;
    vertical-align: top;
}

基线对齐问题，加上vertical-align: top;
}

回复收藏 0

心是晴朗的。 2022-09-10 12:51:19

加上vertical-align:middle;

            .find .find-txt {
                display: inline-block;
                font-size: 20px;
              vertical-align:middle;
            }
            .find ul {
                overflow: hidden;
                display: inline-block;
                margin: 0;
              vertical-align:middle;
            }

回复收藏 0