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

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

<!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大小一样啊

个人理解是，浮动让文字尽量向上和浮动方向拥挤，造成了这种结果（视觉上vertical-align:top）。

给ul设置vertical-align:bottom即可。

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

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

加上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;
            }

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

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

【热门文章】