html - 列表对齐方式错误

Question

这是我的HTML

<div id="footer">
    <div id="footer_content">
           &#169; 2012 Company, Inc.
           <ul>
                <li><a href="/contact">Contact</a></li>
                <li><a href="/terms">Terms</a></li>
                <li><a href="/privacy">Privacy</a></li>
           </ul>
    </div>
</div>​

这是我的CSS

/* FOOTER */ 
#footer {
    position: relative; 
    margin-top: -60px; 
    text-size:12px; 
    height: 60px; 
    clear:both; 
    background-color: blue; 
    line-height: 60px; 
    text-align:right
} 
#footer_content { 
    width: 940px; 
    margin: 0 auto;
}
#footer ul { 
    list-style: none; 
    position: absolute; 
    top: 0px; 
}
#footer ul li { 
    float: left; 
    margin-right: 5px; 
}
#footer ul li a { 
    font-weight: bold; 
    margin-right: 5px; 
    text-decoration: none; 
}
#footer ul li a:hover {  }​

目前版权在右，链接在左。应该是反过来的。您打算做出什么调整来移动它们？

Answer 1

我非常同意 Space Beers 所说的，但有一些方法可以改进这一点。

HTML:

    <div id="footer">
        <div id="footer_content">
           <ul>
               <li><a href="/contact">Contact</a></li>
               <li><a href="/terms">Terms</a></li>
               <li><a href="/privacy">Privacy</a></li>
           </ul>
           <div class="copyright">
               &#169; 2012 Company, Inc.
           </div>
        </div>
    </div>​

CSS:

    #footer {
        position: relative; 
        margin-top: -60px; 
        text-size:12px; 
        height: 60px;
        background-color: blue; 
        line-height: 60px; 
        text-align:right
    } 
    #footer_content { 
        width: 940px; 
        margin: 0 auto;
    }
    #footer ul { 
        float:right;
        list-style: none; 
    }
    #footer ul li { 
        display:block;
        float: left; 
        margin-right: 5px; 
    }
    #footer ul li a { 
        font-weight: bold; 
        margin-right: 5px; 
        text-decoration: none; 
    }

    #footer .copyright{
        float:left;
    }

这应该是完全浏览器兼容的。