0

这是我的 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 {  }​

目前版权在右边，链接在左边。应该反过来。您打算进行哪些调整来移动它们？

4

3 回答 3

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;
    }

这应该与浏览器完全兼容。

于 2012-10-16T15:42:31.253 回答
0

将您的公司信息放在一个包含的 div 中，然后将其浮动。

<div id="footer">
    <div id="footer_content">
       <div class="company_info">&#169; 2012 Company, Inc.</div>
       <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>​

.company_info{
    float: left;
}
于 2012-10-16T15:22:14.307 回答
-2

display:inline;在 li 类中使用

于 2012-10-16T15:29:57.213 回答