Wie Ausrichtung mit Text und Symbolen ausrichten

Question

Ich habe vier Elemente, die ich horizontal ausrichten möchte, aber das letzte nicht.

Mein Code ist:

<span class="rate">8.5</span> 
<span><i class="material-icons md-18">star_rate</i></span> 
<span style="color:darkgrey" class="release-date">2000</span> 
<span style="color:darkgrey"><i class="material-icons md-18">date_range</i></span> 

EDIT:

Auch durch display: inline-block Hinzufügen es funktioniert nicht. Hier ist mein html:

<div class="info"> 
       <span class="rate">8.5</span> 
       <span><i class="material-icons md-18">star_rate</i></span> 
       <span style="color:darkgrey" class="release-date">2000</span> 
       <span style="color:darkgrey"><i class="material-icons md-18">date_range</i></span> 
</div> 

Und hier ist mein CSS:

.info { 
     display: inline-block; 
} 

EDIT 2:

Voll Code mit bootsrap Spalten

<div class="row"> 
     <div class="panel panel-default"> 
     <div class="panel-body"> 
     {% for i in "123456" %} 
      <div class="col-md-2"> 
         <a class="title movie" href="/series/{{ 1 }}/"><img class="img-responsive"</a> 
         <a class="title movie" href="/series/{{ 1 }}/"></a><br> 
         <div class="info"> 
          <span id="1" class="rate">8.5</span> 
          <span id="2" ><i class="material-icons md-18">star_rate</i></span> 
          <span id="3" style="color:darkgrey" class="release-date">2000</span> 
          <span id="4" style="color:darkgrey"><i class="material-icons md-18">date_range</i></span> 
         </div> 
      </div> 
     {% endfor %} 
     </div> 
     </div> 
    </div> 

Answer 1

I don‘ t keine Änderung der Ausrichtung sehen.

<!--Import Google Icon Font--> 
 
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<!-- Compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> 
 
     
 
<span class="rate">8.5</span> 
 
<span><i class="material-icons md-18">star_rate</i></span> 
 
<span style="color:darkgrey" class="release-date">2000</span> 
 
<span style="color:darkgrey"><i class="material-icons md-18">date_range</i></span> 
 
<!--Import jQuery before materialize.js--> 
 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
     <script type="text/javascript" src="js/materialize.min.js"></script>