html - Flexbox call not working -


i've got footer i'd organize horizontally flexbox space-around alignment. whatever reason, li items in footer collapse vertically when attempt other display: inline-block;

 #footer {   width: 75%;   background: rgba(0, 0, 0, .5);   height: 150px;   position: absolute;   bottom: 0; }    #footer ul {     flex-direction: row;     justify-content: space-around;   }     #footer li {     width: 30%;     height: 130px;     flex-direction: row;     justify-content: space-around;     list-style: none;     border: 1px solid white;    } 

the accompanying html simply:

                     <footer id="footer">                           <ul>                              <li>copyright</li>                              <li>sitemap</li>                              <li>contact</li>                           </ul>                      </footer> 

i've tried leaving ul untouched , shown status no visible difference. input appreciated, thanks.

you haven't set display: flex on footer ul.

edit: http://codepen.io/anon/pen/ejkozq


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -