So richten Sie Listenelemente horizontal aus

Question

Ich versuche eine horizontale Liste von Tags zu erstellen. Ich konsultierte W3Schools, aber ihre Methode funktioniert nicht. Meine li Elemente stapeln sich übereinander und sind nicht in der ul div, die in orange angezeigt wird. Wie erstelle ich eine horizontale Liste von Tags?

HTML

<div class = "row"> 
     <div class = "cell"> 
      <div class = "album_container" > 
       <a href = ""> 
        <div class = "album_bar_wrapper"> 
         <div class = "album_bar"> 
          <div class = "float_left left_button"><a class = "buttons "><img class = "album_icon" src = "images/trash.png" alt = "trash" width = "30"/></a></div> 
          <div class = "float_right right_button"><a class = "buttons "> Edit </a></div> 
         </div> 
         <img class = "album_image" src = "images/defaultAlbum.png" alt = "default album" width = "300"/> 
        </div> 
       </a> 
       <ul class = "tags_list"> 
        <li class = "tags">summer</li> 
        <li class = "tags">college</li> 
       </ul> 
      </div> 
     </div> 
</div> 

CSS

.tags_list { 
    list-style-type: none; 
} 

ul.tags_list li { 
    display: inline; 
} 

.tags { 
    position: absolute; /*tags are positioned relative to album container*/ 
} 

Answer 1

.tags_list > .tags 
    display: inline-block; 
} 

(und löschen, die absolute Positionsregel)

Answer 2

Das ist, wie horizontal jedes li eines ul ^^

ul { 
 
     display: table; 
 
     list-style: none; 
 
     padding: 0; 
 
    } 
 

 
    ul li { 
 
     display: inline-block; 
 
     padding: 5px; 
 
    }

<ul> 
 
     <li>One</li> 
 
     <li>Two</li> 
 
     <li>Three</li> 
 
     <li>Four</li> 
 
     <li>Five</li> 
 
    </ul>