Question

我正在尝试建立一个站点，该站点将用作我的“简历”，以使用我所学到的新知识替换旧的站点。但是，我走得还很远，我遇到了一个问题，每当我缩小浏览器窗口时，我的标签就会重叠。

我已经调整了位置，以使它们准确地放置在窗口中它们想要的位置，但是即使使用百分比，它们仍然会重叠。我试过将position属性调整为固定值，绝对值（最佳值，但仍然重叠）和其他值的其他组合。我也尝试过调整边距\填充，但他们只是把它放在那儿。

/* nav-menu settings*/

.navMenu {
  width: 100px;
  padding-left: 3%;
  padding-top: 3%;
  display: block;
  padding-right: 10px;
}

.navMenu a {
  background-color: #3F025B;
  color: white;
  display: block;
  padding: 12px;
  text-decoration: none;
  border-right: 3px ridge;
  border-color: #A17500;
  text-align: center;
}

.navMenu a:hover {
  background-color: #00B4FF;
  color: #282941;
}

.navMenu a.active {
  background-color: #E727C6;
  /* Add a green color to the "active/current" link */
  color: black;
}


/* background settings */

HTML {
  background-image: url("SynthwaveHorizon.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}


/* Scrollbar settings */

 ::-webkit-scrollbar {
  width: 3px;
}


/* Track */

 ::-webkit-scrollbar-track {
  background: transparent;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
  background: #00B4FF;
}


/* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
  background: lightblue;
}


/*Below is styling specific to the Home page */

.artBox {
  height: 85%;
  width: 75%;
  background-color: black;
  margin-left: 12%;
  margin-top: 3%;
  opacity: .8;
  border: 5px inset pink;
}

.defyBox {
  width: 75%;
  color: white;
  margin-left: 12.5%;
  margin-top: 20%;
  text-align: center;
}

.blinking {
  animation: blinkingText 1s infinite;
  font: bold;
}

@keyframes blinkingText {
  0% {
    color: orange;
  }
  49% {
    color: purple;
  }
  100% {
    color: hotpink;
  }
}

<body class="background">

  <div class="navMenu">
    <a href="#" class="active">Home</a>
    <a href="#">
      <div>Link 1</div>
    </a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
    <a href="#">Link 7</a>
    <a href="#">Link 8</a>
    <a href="#">Link 9</a>
  </div>

  <div class="defyBox">
    <p id="loader" class="blinking">
      Pretending to load something!<br> ...
    </p>
  </div>


  <div class="artBox">
  </div>

</body>

我认为设置绝对值将强制其保持其尺寸，但我确信这是正确的，这仅仅是因为“菜单”和“盒子”的尺寸太宽而无法很好地设置它

当浏览器窗口缩小时，如何防止div重叠？

0 个答案: