如何對齊ul列表

Question

如何對齊我的列表？我在這裏做錯了什麼？

小提琴鏈接：http://jsfiddle.net/p9C4j/1/

HTML：

<div id="footer"> 
    <div id="footer_content"> 
    <div class="footer_nav-list"> 
    <ul class="footer_style_list "> 
      <li><a href="#">About us</a></li> 
      <li><a href="#">About </a></li> 
      <li><a href="#">Our Vision</a></li> 
      <li><a href="#"> Technology</a></li> 
      <li><a href="#">Our Customers</a></li> 
    </ul> 

      <ul class="footer_style_list "> 
      <li><a href="#"> Solutions</a></li> 
      <li><a href="#">General Descreption</a></li> 
      <li><a href="#">Detailed Descreption</a></li> 
     </ul> 

      <ul class="footer_style_list "> 
     <li><a href="customers.html">Customers</a> 
      <li><a href="#"> fdhfdhfdhfdh</a></li> 
      <li><a href="#">Customers List</a></li> 
     </ul> 

     <ul class="footer_style_list "> 
     <li><a href="#">Contact Us</a></li> 
      <li><a href="#">Map</a></li> 
      <li><a href="#">Contact Information</a></li> 
      <li><a href="#"> Call Me Back</a></li> 
     </ul> 
    </div> 
    <div id="bottom_nav"><span> © 2014</span> 
<span>dgfdhfdhdfhdfhl</span> 
<span>dfhfdhfdhfdhfdhdfh</span> 
<span>fdhfdhdfhdfhhfd.com</span></div><!--close bottom_nav--> 

</div></div> 

Answer 1

的聯繫是在中心對齊由於下面的一段CSS代碼，即 「文本對齊：中心」

.footer_style_list > li > a { 
    color: #000; 
    text-decoration: none; 
    position: absolute; 
    width: 120px; 
    height: 30px; 
    text-align: center; 
    padding-top: 12px; 
    box-sizing: border-box; 
} 

如果您想對齊左側，只需進行以下更改：

text-align: left; 

Answer 2

.footer_style_list ul { 
    float: left; 
    width: 130px; 
} 

應該是：

.footer_style_list { 
    float: left; 
    width: 130px; 
} 

當你的html是：

<ul class="footer_style_list "> 

你是努力的目標是ul內ul。沒有意義。

DEMO

注：我敢肯定，你可以排序的問題，其餘部分。

---

全部排序，閱讀代碼並嘗試去理解它。我對此做得很少。

DEMO HERE

Answer 3

我固定它註釋一些CSS代碼

Your code modified

.footer_style_list > li { 

    margin: 0; 
    display: block; 
    width: 120px; 
    /*height: 30px;*******************/ 
    position: relative; 
    line-height: 30px; 
    color: #000; 
} 

.footer_style_list > li > a { 
    color: #000; 
    text-decoration: none; 
    /*position: absolute;****************/ 
    width: 120px; 
    height: 30px; 
    text-align: center; 
    padding-top: 12px; 
    box-sizing: border-box; 
}