字体对齐到内联列表的底部

Question

我有一个简单的内联列表如下：

         <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 框架，

Answer 1

很难理解你的问题，因为图像似乎与你的不符html，但你的代码中有一件事不能像你描述的那样工作：

您将 <h6> 标签放在 <li> 标签内。像 <h6> 这样的 Header 标签默认是块元素，所以如果你把它放到 inline-set <li> 标签中，它会弄乱行内对齐。

第一个 <li> 中的 <p> 标签也是块元素 - 同样的事情...

字体对齐到内联列表的底部

Fonts align to bottom of inline list

css

fonts

zurb-foundation

font-awesome