HR未集中在頁腳

Question

由於某種原因，我的hr標記將在頁腳旁邊垂直進行，而不是在鏈接列表下方水平移動，但我不完全確定它爲什麼這樣做，關於如何修復的任何建議？

CSS：

footer ul { 
    list-style: none; 
    text-align: center; 
    } 

footer div { 
    margin: 0 auto; 
    display: inline-block; 
    } 

footer { 
    margin-left: 25%; 
    display: flex; 
    } 

HTML：

<footer> 
    <div> 
    <ul> 
     <li><a href="#" target="_blank">Facebook</a></li> 
     <li><a href="#" target="_blank">Twitter</a></li> 
     <li><a href="#" target="_blank">Instagram</a></li> 
     <li><a href="#" target="_blank">Vine</a></li> 
    </ul> 
    </div> 
    <div> 
    <ul> 
     <li><a href="#" target="_blank">YouTube</a></li> 
     <li><a href="#" target="_blank">Twitch</a></li> 
     <li><a href="#" target="_blank">Mobcrush</a> 
     <li><a href="#" target="_blank">SoundCloud</a></li> 
    </ul> 
    </div> 
    <div> 
    <ul> 
     <li><a href="#" target="_blank">GitHub</a></li> 
     <li><a href="#" target="_blank">Stack Overflow</a></li> 
     <li><a href="#" target="_blank">Pastebin</a></li> 
     <li><a href="#" target="_blank">Curse</a></li> 
    </ul> 
    </div> 
    <div> 
    <ul> 
     <li><a href="#" target="_blank">Minecraft Forum</a></li> 
     <li><a href="#" target="_blank">Pocketmine</a></li> 
     <li><a href="#" target="_blank">JSFiddle</a></li> 
     <li><a href="#" target="_blank">Reddit</a></li> 
    </ul> 
    </div> 
    <hr> 
</footer> 

任何幫助將是巨大的！

感謝，

-ItzJavaCraft

Answer 1

它成爲一個柔性的項目。包裝你的div，並相應地調整CSS，它將起作用。

footer ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    } 
 

 
footer div div { 
 
    margin: 0 auto; 
 
    display: inline-block; 
 
    } 
 

 
footer > div { 
 
    margin-left: 25%; 
 
    display: flex; 
 
}

<footer> 
 
    <div> 
 
    <div> 
 
     <ul> 
 
     <li><a href="#" target="_blank">Facebook</a></li> 
 
     <li><a href="#" target="_blank">Twitter</a></li> 
 
     <li><a href="#" target="_blank">Instagram</a></li> 
 
     <li><a href="#" target="_blank">Vine</a></li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <ul> 
 
     <li><a href="#" target="_blank">YouTube</a></li> 
 
     <li><a href="#" target="_blank">Twitch</a></li> 
 
     <li><a href="#" target="_blank">Mobcrush</a> 
 
     <li><a href="#" target="_blank">SoundCloud</a></li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <ul> 
 
     <li><a href="#" target="_blank">GitHub</a></li> 
 
     <li><a href="#" target="_blank">Stack Overflow</a></li> 
 
     <li><a href="#" target="_blank">Pastebin</a></li> 
 
     <li><a href="#" target="_blank">Curse</a></li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <ul> 
 
     <li><a href="#" target="_blank">Minecraft Forum</a></li> 
 
     <li><a href="#" target="_blank">Pocketmine</a></li> 
 
     <li><a href="#" target="_blank">JSFiddle</a></li> 
 
     <li><a href="#" target="_blank">Reddit</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <hr> 
 
</footer>