Question

我正在尝试将文本链接对齐在彼此之下但由于某种原因，某些链接不会彼此相互影响。

这就是它的样子：http://i.stack.imgur.com/1gonA.jpg。

这就是我想要实现的目标：http://i.stack.imgur.com/oH0Ap.jpg

以下是目前的代码：

HTML：

    <footer class="footer">
      <div class="bottom-column">
        <div class="bottom-header">STREETZ</div>
        <a class"bottom-link" href="#Home">Home</a>
        <a class"bottom-link" href="#About">About us</a>
        <a class"bottom-link" href="#Sitemap">Sitemap</a>
        <a class"bottom-link" href="#Blog">Blog</a>
        <a class"bottom-link" href="#Blog">Privacy Policy</a>
        <a class"bottom-link" href="#Blog">Terms of Service</a>

      </div>

      <div class="bottom-column">
        <div class="bottom-header">SUPPORT</div>
        <a class"bottom-link" href="#Home">FAQ</a>
        <a class"bottom-link" href="#About">Contact us</a>
        <a class"bottom-link" href="#Sitemap">Shipping</a>
        <a class"bottom-link" href="#Blog">Returns</a>
      </div>   
    </footer>

CSS：

     .footer {
      position: relative;
      width: 1024px;
      height: 200px;
      background: #f5f5f5;
      margin: 0 auto;
      top: 1255px;
      border-top: 1px solid #d8d8d8;
    }

    .bottom-header {
      font-size: 14px;
      line-height: 20px;
      position: relative;
      color: #333;
      text-transform: uppercase;
    }

    .bottom-column {
      float:left;
      display: inline;
      font-size: 15px;
      width: 105px;
      height: 160px;
      padding: 20px;
    }

    .bottom-column a {
      text-decoration: none;
      color: #6a6a6a;
      float: left;
      left: 50px;
      padding-top: 10px;
      font-size: 13px;
    }

Answer 1

尝试以下方法：

.bottom-column a {
    display: block; //To force the text links to stack on top of one another
}

从float:left移除.bottom-column a {...}。 float导致链接相互排列。

这是Fiddle。

Answer 2

尝试添加'clear：both;'到.bottom-column a

.bottom-column a {
  text-decoration: none;
  color: #6a6a6a;
  float: left;
  left: 50px;
  padding-top: 10px;
  font-size: 13px;
  clear: both;
}

将文本链接对齐在一起

2 个答案: