css 问题，inline-block的两个元素上下不对齐？
本文介绍了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大小一样啊
解决方案
上面已经说了是基线对其问题，进一步来说，两个 inline-block 的元素都按照默认的垂直对齐方式为什么会产生不同的对齐效果？原因在于其中一个元素使用了 overflow: hidden 属性，这一属性改变了 inline-block 元素的基线位置，导致这一元素上移。
因此，同时设置两个元素的垂直对齐方式为非基线对齐的值，或为另一个元素添加 overflow 属性都可以解决这一问题。
这篇关于css 问题，inline-block的两个元素上下不对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
