列表排列方式不對

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

目前的版權是在右邊，鏈接在左邊。它應該是相反的。你打算如何調整它們？

來源

2012-10-16 Jimmy

我將你的代碼示例複製到jsfiddle中，但結果只是空白。也許你可以稍微調整一下代碼，告訴我們你看到了什麼？ [jsfiddle示例]（http://jsfiddle.net/m28rU/） – TLS

@TLS它不是空白 - 「＃頁腳」的負邊距爲60px，因此它只是隱藏了 –

@TLS - 頁邊距和背景顏色CSS隱藏文本。 – j08691

我非常同意什麼樣的空間比爾斯說，但有辦法來改善這一點。

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-16 15:42:31

'div'是一個沒有意義的元素。它只是用來包裝其他元素。在這種情況下，你所標註的肯定是一段文字，因此適當使用的元素當然是'p'。我也沒有看到兩個環繞'div'（'＃footer'和'＃footer_content'）的點。 – powerbuoy

好點！我假設他無法使用任何html5標籤，但是如果您使用的是html5，您應該通過使用

把你的公司信息放在一個包含div和float的左邊。

<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-16 15:22:14 SpaceBeers

-2

使用display:inline;鋰類

來源

2012-10-16 15:29:57

如果有人投下來，請評論原因也有幫助我們 –

列表排列方式不對

回答

相關問題