問題：href 鏈接在彼此之上

Question

我網站上的 href 鏈接直接在彼此之上——而不是在彼此垂直之上。 我嘗試添加“位置：相對”，但沒有奏效。

這是 HTML：

 div.footer { background-color: #8dcab3ff; /* Dark Teal */ color: #ffffff; /* White */ padding: 25px 0px; width: fill; display: block; overflow: hidden; box-sizing: border-box; } div.inner_footer { display: block; margin: 0 auto; height: 100%; }.inner_footer.logo_container { width: 30%; float: left; display: block; height: 100%; }.inner_footer.logo_container img { width: 60%; height: auto; }.inner_footer.footer_third { width: calc(21.666667% - 20px); float: left; height: 100%; text-align: right; display: block; }.inner_footer.footer_third:last-child { text-align: right; }

 <div class="footer"> <div class="inner_footer"> <.-- Footer content starts here --> <div class="logo_container"> <img src="images/14_logo.png"> </div> <div class="footer_third"> <h5>Information <h5> <a href="#"> Privacy Policy </a> <a href="#"> Copyright</a> </div> <!-- Footer content ends here --> </div> </div>

Answer 1

試試這個，Html：

<ul id="mainMenu">
  <li><a href="#"> Privacy Policy </a></li>
  <li><a href="#"> Copyright</a></li>
</ul>

CSS：

#mainMenu {
  margin: 10px;
  width: 900px;
  font-family: sans-serif;
}
#mainMenu li {
  display: block;
  width: 120px;
  float: left;
  margin-left: 2px;
  border: 1px solid #000;
}

#mainMenu a {
  display: block;
  padding: 3px;
  text-decoration: none;
  background-color: #fff;
  color: #009;
}

#mainMenu a:hover {
  background-color: #009;
  color: #fff;
}

Answer 2

如果您希望標簽彼此相鄰，則需要留出空間讓它們彼此相鄰。 目前，您只有 21.66% 的寬度 如果這不是您的意思或需要，可以發布截圖

 div.footer { background-color: #8dcab3ff; /* Dark Teal */ color: #ffffff; /* White */ padding: 25px 0px; width: fill; display: block; overflow: hidden; box-sizing: border-box; } div.inner_footer { display: block; margin: 0 auto; height: 100%; }.inner_footer.logo_container { width: 30%; float: left; display: block; height: 100%; }.inner_footer.logo_container img { width: 60%; height: auto; }.inner_footer.footer_third { width: calc(61.666667% - 20px); float: left; height: 100%; text-align: right; display: inline-block; }.inner_footer.footer_third a { display: inline-block; margin-right: 10px; }.inner_footer.footer_third:last-child { text-align: right; }

 <div class="footer"> <div class="inner_footer"> <.-- Footer content starts here --> <div class="logo_container"> <img src="images/14_logo.png"> </div> <div class="footer_third"> <h5>Information</h5> <a href="#"> Privacy Policy </a> <a href="#"> Copyright</a> </div> <!-- Footer content ends here --> </div> </div>