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

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>这样的标头标签默认是块元素，因此如果将其放入内联集<li>标记中，则会使内联对齐变得混乱。

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