人力资源不以页脚为中心

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，它会起作用。

＆＃13;

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;