Saya memiliki footer yang ingin saya atur secara horizontal dengan flexbox space-around alignment. Untuk alasan apa pun, item li di footer ini runtuh secara vertikal ketika saya mencoba apa pun selain 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;
   }

Html yang menyertainya hanyalah:

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

Saya sudah mencoba membiarkan ul tidak tersentuh dan dengan status yang ditampilkan tidak ada perbedaan yang terlihat. Setiap masukan dihargai, terima kasih.

0
Alb 14 Mei 2015, 22:56

1 menjawab

Jawaban Terbaik

Anda belum menetapkan display: flex di footer ul.

Sunting: http://codepen.io/anon/pen/EjKOZq

1
Benjamin 14 Mei 2015, 23:06
Terima kasih, saya yakin saya telah mencobanya sebelumnya; hanya mencoba lagi dan tidak melakukan trik.
 – 
Alb
14 Mei 2015, 23:03
Tergantung pada browser, ini mungkin masalah awalan: caniuse.com/#search=flex
 – 
Benjamin
14 Mei 2015, 23:07
Suntingan kedua berhasil. Terima kasih Benyamin. Anda adalah seorang pahlawan.
 – 
Alb
14 Mei 2015, 23:10