为页面制作页脚，但某些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; 
} 

希望有帮助。