css - Float right 不会在框内 float ，而是在框外 float

Question

我每次都想在浏览器顶部修复这个框。但是右边有一些问题我不知道如何解决所以我寻求帮助。

#StickyBar #RightSideOfStickyBar
{
    float : right ;
}

这应该 float 到 #BoxAlpha 内的最大最右侧。但它一直 float 到浏览器的边缘。

我也在使用 HTML5 doctor 的 CSS 重置。

这是 HTML5:

    <div id="BoxAlpha">

        <section id="StickyBar">

            <section id="LeftSideOfStickyBar">

                <ul class="Home">
                    <li class="HomeList">
                    <a href="#">Home</a>
                    </li>
                </ul>

            </section>

            <section id="RightSideOfStickyBar">

                <ul class="SignUpAndSignIn">
                    <li class="SignUpAndSignInList">
                    <a href="#">Sign Up</a>
                    </li>

                    <li class="SignUpAndSignInList">
                    <a href="#">Sign In</a>
                    </li>
                </ul>

            </section>

        </section>

    </div>

这是 CSS:

#BoxAlpha
{
    width : 1000px ; height : auto ; margin-left : auto ; margin-right : auto ;
}

    #StickyBar
    {
        background-color : #EBEBEB ; font-family : "Comic Sans MS" , cursive , sans-serif ; font-size : 1em ; width : 100% ; height : auto ;
        line-height : 50px ; background : linear-gradient( #00FFFF , #4D70DB ) ; border-style : solid ; border-color : #999999 ;
        position : fixed ; top : 0 ; z-index : 1 ;
    }


        #StickyBar #LeftSideOfStickyBar
        {
            float : left ;
        }

            #StickyBar #LeftSideOfStickyBar .Home
            {
                list-style : none ;
            }

            #StickyBar #LeftSideOfStickyBar .Home .HomeList
            {
                float : left ; width : 7em ; text-align : center ;
            }

            #StickyBar #LeftSideOfStickyBar .Home .HomeList > a
            {
                font-weight : 550 ; text-decoration : none ; color : #000000 ; cursor : default ;
            }

        #StickyBar #RightSideOfStickyBar
        {
            float : right ;
        }

            #StickyBar #RightSideOfStickyBar .SignUpAndSignIn
            {
                list-style : none ;
            }

            #StickyBar #RightSideOfStickyBar .SignUpAndSignIn .SignUpAndSignInList
            {
                float : left ; width : 7em ; text-align : center ;
            }

            #StickyBar #RightSideOfStickyBar .SignUpAndSignIn .SignUpAndSignInList > a
            {
                font-weight : 550 ; text-decoration : none ; color : #000000 ; cursor : default ;
            }

Answer 1

好的，所以您的代码可以稍微简化一下。但首先...因为 header 是 position: fixed，所以它不受其容器的限制；它会将自己定位为您页面上的唯一元素。

来自 CSS absolute and fixed positioning在 w3.org 上:

Fixed positioning is really just a specialized form of absolute positioning; elements with fixed positioning are fixed relative to the viewport/browser window rather than the containing element; even if the page is scrolled, they stay in exactly the same position inside the browser window.

如果你想保持position: fixed，解决办法是给它一个max-width:

CSS

#StickyBar {
max-width: 1000px;
}

Here is an example.

或者，如果您不想要 position: fixed，请将其删除并添加 overflow:hidden，如下所示:

CSS

#StickyBar {
    overflow: hidden;
}

它现在将遵守其父级的宽度。

Here is an example without position:fixed

---

如果您有兴趣，我还创建了一个您可以使用的简单布局。

Have a new layout example!

HTML

<header>
    <nav class="pages">
        <a href="#">Home</a>
    </nav>
    <nav class="signin">
        <a href="#">Signup</a>
        <a href="#">Signin</a>
    </nav>
</header>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body {
    height: 100%;
    font: 100% Helvetica;
}

header { 
    max-width: 1000px;
    height: 80px;
    background:linear-gradient(#0FF,#4D70DB);
    display: table;
    width: 100%;
    margin: 0 auto;
}

header nav { 
    display: table-cell;
    text-align: left;
    vertical-align: bottom;
}

header .signin {
    text-align: right;
}

a {
    color: #000;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
}