Question

我网站上的href链接彼此直接位于顶部-而不是彼此垂直位于顶部。我尝试添加“ positon：relative”，但是没有用。

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

问题：href链接彼此重叠

2 个答案: