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>