为什么我的花车不工作

Question

I am trying to create a footer for a website and need there to be two sets of links on either side. I have it all in a div and the links for the left and right sides are in uls and their own divs that have ids. This is my 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>

And here is the CSS I have going along with it:

.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;}

Why is the footer for the right side not floating all the way to the right side of the page? Thanks for any help

Answer 1

To my understanding, the problem is your whole footer bb does not have a width. Just adding width:100% to bb will solve this.

The fr actually floats, however, inside the footer bb .

I put a jsfiddle at https://jsfiddle.net/Lw93vtgr/ showing this.

Further, you may not want to assign float with inline-block , the result display would be block anyway.

Answer 2

So i think you forgot set the width of class .bb

In your code, <div class=".bb"> have a width equal to your content.

You can try to set .bb class with width 100% or equal to your page width

Answer 3

You must remove the position: fixed; from the bb class, or else specify the width of it.

Answer 4

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