html - 对齐彼此下方的文本链接

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
}

并从 .bottom-column a {...} 中删除 float:left。 float 导致链接相互对齐。

这是一个 Fiddle .