шрифты выравнивать в нижней части списка инлайн

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 framework,

Answer 1

Трудно понять вашу проблему, так как изображение, похоже, не соответствует вашему html, но есть одна вещь в вашем коде, который не может работать, когда вы описываете его:

Вы размещаете тег <h6> внутри тега <li>. Заголовки заголовков, такие как <h6>, являются элементами блока по умолчанию, поэтому, если вы поместите это в тег inline-set <li>, это испортит встроенное выравнивание.

Также <p> тега в первом <li> является блочным элементом - то же самое ...