字体对齐到内联列表的底部
Fonts align to bottom of inline list
我有一个简单的内联列表如下:
<ul class="list-inline">
<li>
<p>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
</p>
</li>
<li>
<h6>May - june</h6>
</li>
</ul>
css
.list-inline {
margin-left: 0;
font-size: 0;
padding-left: 0;
list-style: none;
text-align: center;
}
.list-inline>li {
padding-left: 0;
padding-right: 0.3rem;
font-size: 13px;
display: inline-block;
}
但是输出结果如下图:对此的任何解决方案,我正在使用 foundation6 框架,
很难理解你的问题,因为图像似乎与你的不符html,但你的代码中有一件事不能像你描述的那样工作:
您将 <h6>
标签放在 <li>
标签内。像 <h6>
这样的 Header 标签默认是块元素,所以如果你把它放到 inline-set <li>
标签中,它会弄乱行内对齐。
第一个 <li>
中的 <p>
标签也是块元素 - 同样的事情...
我有一个简单的内联列表如下:
<ul class="list-inline">
<li>
<p>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
</p>
</li>
<li>
<h6>May - june</h6>
</li>
</ul>
css
.list-inline {
margin-left: 0;
font-size: 0;
padding-left: 0;
list-style: none;
text-align: center;
}
.list-inline>li {
padding-left: 0;
padding-right: 0.3rem;
font-size: 13px;
display: inline-block;
}
但是输出结果如下图:对此的任何解决方案,我正在使用 foundation6 框架,
很难理解你的问题,因为图像似乎与你的不符html,但你的代码中有一件事不能像你描述的那样工作:
您将 <h6>
标签放在 <li>
标签内。像 <h6>
这样的 Header 标签默认是块元素,所以如果你把它放到 inline-set <li>
标签中,它会弄乱行内对齐。
第一个 <li>
中的 <p>
标签也是块元素 - 同样的事情...