Question

我正在尝试为网站创建一个页脚，并且需要两边都有两组链接。我把它全部放在一个div中，左右两边的链接都是用uls和他们自己的div有ids。这是我的HTML：

<div class="bb">
        <div class="fl">
            <ul>
                <li><a href="link">Advertising</a></li>                                 
                <li><a href="link">Business</a></li>
                <li><a href="link">About</a></li>
            </ul>
        </div>
        <div class="fr">
            <ul>    
                <li><a href="link">Privacy</a></li>
                <li><a href="link">Terms</a></li>
                <li><a href="link">Settings</a></li>
            </ul>
        </div>
    </div>

以下是我一直使用的CSS：

.bb {position: fixed;bottom: 0;list-style: none;margin: 0;padding: 0;text-align: right;}
.fl {display: inline-block;float: left;}
.fr {display: inline-block;float: right;}
.fl li {display: inline;}
.fr li {display: inline;}

为什么右侧的页脚不会一直浮动到页面的右侧？谢谢你的帮助

Answer 1

根据我的理解，问题是你的整个页脚bb没有宽度。只需将width:100%添加到bb即可解决此问题。

fr实际上会在页脚bb内浮动。

我在https://jsfiddle.net/Lw93vtgr/放了一个jsfiddle显示这个。

此外，您可能不希望float分配inline-block，结果display无论如何都会block。

Answer 2

所以我想你忘记了设置 .bb

类的宽度

在您的代码中，<div class=".bb">的宽度等于您的内容。

您可以尝试设置宽度为100％或等于页面宽度的 .bb 类

Answer 3

您必须从 bb 类中删除 position：fixed; ，否则请指定其宽度。

Answer 4

尝试将width: 100%添加到课程.bb。

为什么我的花车没有工作

4 个答案: