Question

这可能是一个愚蠢的问题，问你们，但我是一个相当新的，所以请耐心等待，因为我愿意学习。

我的问题是这样的，https://alphavirginis.github.io导航栏似乎在着陆页上很好，但是当你转到它时，它似乎向左移动了，或者如果我试图修复它，它就会出现问题。我会往右走我是网络开发人员的新手，所以我要求你的帮助。谢谢！

这里是github repo https://github.com/AlphaVirginis/AlphaVirginis.github.io

Answer 1

您需要将.navigation和.box，.right分开，而不是您的标记。

<div class="navigation">
  <a href="index.html">Home</a>
  <a href="about2.html">About</a>
  <a href="works.html">Works</a>
  <a href="contact.html">Contact</a>
</div>
<!-- Navigation Ends Here -->

而不是改变一些css

.navigation {
  text-align: center; // Added
}

而不是将.box和.right两个框包装在一个包装中，说.box-wrapper

    <div class="box-wrapper">
        <div class="box">
          <img src="img/Lelouch.jpg" alt="" class="box-img">
          <h1> Lelouch Lamperouge </h1>
          <h5> Web Developer - Software Developer </h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores sequi ad suscipit, iure soluta cumque animi, quos rem repellat, nemo voluptatibus libero beatae distinctio! Laboriosam, ducimus, quis? Error, quia dignissimos.</p>
        </div>

    <div style="padding-top: 10px"></div> <!-- Prevenets Margin collapse -->

      <div class="right">
        <img src="img/Lelouch.jpg" alt="" class="box-img">
        <h1>  Lelouch Lamperouge </h1>
        <h5>Web Developer - Software Developer<!--5--></h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores sequi ad suscipit, iure soluta cumque animi, quos rem repellat, nemo voluptatibus libero beatae distinctio! Laboriosam, ducimus, quis? Error, quia dignissimos.</p>
    </div>
</div> <!-- box-wrapper Ends Here -->

根据您的要求设置.box-wrapper的宽度

.box-wrapper::before, .box-wrapper::after {
  content: "";
  clear: both;
  display: block;
  overflow: hidden;
}

.box-wrapper {
  width: 100%;
  max-width: 1170px; // change as per your requirement
  margin: 0 auto;
}

Answer 2

.navigation在about页面中你必须给出text-align：center css。它会解决问题。

CSS NavBar不到位

2 个答案: