为什么我的花车不工作

Question

我正在尝试为网站创建页脚，并且需要在两边都有两组链接。 我将所有内容都放在一个div中，左侧和右侧的链接都在uls和它们自己的具有id的div中。 这是我的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没有宽度。 只需在bb添加width:100%即可解决此问题。

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

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

此外，您可能不希望为inline-block分配float ，结果display仍然是block 。

Answer 2

所以我认为您忘记设置班级.bb的宽度了

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

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

Answer 3

您必须删除职位：固定； 从bb类，或者指定它的宽度。

Answer 4

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