我有以下 HTML ( Example ):
<span>Sign in with</span>
<ul>
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-twitter"></i></a></li>
</ul>
还有 CSS:
span {
display: inline-block;
font-weight: bold;
margin-right: 6px;
}
ul {
display: inline-block;
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
list-style: none;
list-style-type: none;
margin: 0;
padding: 4px;
}
ul li {
font-size: 2.0rem;
}
我希望 SPAN 与 UL 中的图标垂直对齐。但是即使对跨度应用填充,我也无法做到这一点。
关于如何解决这个问题有什么想法吗?
最佳答案
添加vertical-align:middle
给你的<i>
元素:
span {
display: inline-block;
font-weight: bold;
margin-right: 6px;
}
ul {
display: inline-block;
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
list-style: none;
list-style-type: none;
margin: 0;
padding: 4px;
}
ul li {
font-size: 2.0rem;
}
i[class^="icon-"] {
vertical-align: middle;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<span>Sign in with</span>
<ul>
<li><a href="#"><i class="icon-facebook"></i></a>
</li>
<li><a href="#"><i class="icon-twitter"></i></a>
</li>
</ul>
关于html - 将 SPAN 与 UL 垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39796903/