爲頁面製作頁腳，但某些CSS無效

Question

因此，我正在嘗試爲網頁製作頁腳。 以下是我有：

我想是（我盡我所能去證明它）：

（這些圖像似乎太小了，因爲實在是太長了。如果你不介意，放大您的瀏覽器）

於是，就有了我的HTML結構：

<div id="footer"> 
    <table id="info"> 
     <tr> 
      <td colspan="3">You're here: 
      <div id="where"></div></td> 
     </tr> 

     <tr> 
      <th> 
<div id="additional-links"> 
<ul class="nobullet"> 
      <li><a href="">Intro</a></li> 
       <li><a href="">Hiring</a></li> 
       <li><a href="">Collab</a></li> 
       <li><a href="">Credits</a></li> 

       <div id="shared"> 
        <span style="color: #fff;">|</span> 
        <a href=""><img src="fl.jpg" alt="facebook"></a> 
        <a href=""><img src="tl.jpg" alt="twitter"></a> 
        <a href=""><img src="tml.png" alt="tumblr"></a> 
        <span style="color: #fff;">|</span> 
       </div> 
      </ul> 
</div> 
</th> 
     </tr> 

     <tr> 
      <td colspan="3">&copy;2013 
      </td> 
     </tr> 
    </table> 
</div> 

然後相應的CSS：

div { 
    padding: 0; 
    margin: 0; 
    text-align: center; 
} 

#footer { 
    width: 100%; 
    height: 15%; 
    background-color: #dcd9ca; 
} 

#info { 
    text-align: center; 
    width: 100%; 
    min-height: 100%; 
} 

.nobullet li { 
    display: inline; 
} 

.nobullet li a { 
    text-decoration: none; 
    color: brown; 
} 

#shared { 
    float: right; 
    position: relative; 
} 

#shared img{ 
    width: 24px; 
    height: 24px; 
    vertical-align: middle; 
} 

所以我的問題是：我如何進行更改？

我希望我已經說清楚了。

Answer 1

我同意@vishalkin所做的評論，您不應該使用表格結構。 即使你做了，你有一個問題，使你的HTML無效。 #shared div不能是ul的父項。你需要把它裹在裏面。

這是我的解決方案jsfiddle.net。

下面是HTML：

<div id="footer"> 
    <p>You're here:</p> 
    <div id="footerLinks"> 
     <ul id="links"> 
      <li><a href="">Intro</a></li> 
      <li><a href="">Hiring</a></li> 
      <li><a href="">Collab</a></li> 
      <li><a href="">Credits</a></li> 
     </ul> 
     <ul id="shared"> 
      <li>| <a href=""><img src="" alt="facebook"/></a></li> 
      <li><a href=""><img src="" alt="twitter"/></a></li> 
      <li><a href=""><img src="" alt="tumblr"/></a> |</li> 
     </ul> 
    </div> 
    <p>&copy;2013</p> 
</div> 

這裏是CSS：

body { background: #060; width: 1024px; } 

div { padding: 0; margin: 0; text-align: center; } 

#footer { width: 100%; text-align: center; background-color: #dcd9ca; position: relative; } 

#footer ul, 
#footer li { margin: 0px; padding: 0px; } 

#footerLinks { position: relative; } 

#links { list-style: none; display: inline; width: auto; } 

#links li { display: inline-block; *display: inline; *zoom: 1; /* IE7 fix */ } 

#links li > a { display: block; width: 150px; text-decoration: none; color: brown; text-align: center; font-weight: bold; } 

#shared { position: absolute; top: 0px; right: 75px; /* your margin from the right */ list-style: none; color: #fff;} 

#shared li { display: inline-block; *display: inline; *zoom: 1; /* IE7 fix */ } 

#shared img { border: 0px; width: 24px; height: 24px; vertical-align: middle; } 

我在一些額外扔你：

• 邊境0你的社交媒體形象。一些瀏覽器會顯示一個巨大的藍色邊框，當圖像在鏈接內時
• 使您的頁腳鏈接塊，以便他們更容易訪問，而不僅僅是佔用文本區域
• 在我的jsfiddle中，身體和顏色，僅用於展示社交媒體鏈接右側的填充。

Answer 2

要解決這兩個問題，您可以將共享div絕對定位。

<div id="additional-links"> 
    <div id="shared"> 
     <span style="color: #fff;">|</span> 
     <a href=""><img src="fl.jpg" alt="facebook"></a> 
     <a href=""><img src="tl.jpg" alt="twitter"></a> 
     <a href=""><img src="tml.png" alt="tumblr"></a> 
     <span style="color: #fff;">|</span> 
    </div> 
    <ul class="nobullet"> 
     <li><a href="">Intro</a></li> 
     <li><a href="">Hiring</a></li> 
     <li><a href="">Collab</a></li> 
     <li><a href="">Credits</a></li> 
    </ul> 
</div> 

您可以通過更改下面的150px設置來調整共享鏈接的距離。

#additional-links { 
    position: relative; 
} 

#shared { 
    position: absolute; 
    right: 150px; 
} 

希望有幫助。