0

所以我正在尝试为网页制作页脚。这是我所拥有的： 原样

我想要的是（我尽力证明它）： 成为

（图片看起来太小了，因为它太长了。如果你不介意，放大你的浏览器。）

然后是我的 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;
}

所以我的问题是：如何进行更改？

我希望我已经说清楚了。

4

2 回答 2

1

我同意@vishalkin 的评论，即您不应该使用表结构。即使你这样做了，你也会遇到一个问题，使你的 HTML 无效。#shared div 不能是 ul 的父级。您需要将其包装在一个 li 中。

这是我在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 中，我在 body 上放了一个宽度和一个颜色，只是为了展示社交媒体链接右侧的填充。
于 2013-10-10T18:42:16.003 回答
0

要解决这两个问题，您可以使共享 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>

您可以通过更改下面的 150 像素设置来调整共享链接的右侧距离。

#additional-links {
    position: relative;
}

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

希望有帮助。

于 2013-10-10T18:22:29.190 回答