Question

我想每次都在浏览器的顶部修复此框。但是右边有一些问题，我无法弄清楚如何解决，所以我要求帮助。

#StickyBar #RightSideOfStickyBar
{
    float : right ;
}

这应该漂浮到#BoxAlpha内最大的最右侧。但它会浮动直到浏览器的边缘。

我也使用HTML5医生的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

好的，所以你的代码可以简化一点。但首先......因为标题是position: fixed，它不受其容器的限制;它将自己定位为它是您页面上唯一的元素。

来自w3.org上的CSS absolute and fixed positioning：

固定定位实际上只是一种绝对定位的特殊形式;具有固定定位的元素相对于视口/浏览器窗口而不是包含元素;即使页面滚动，它们也会在浏览器窗口内保持完全相同的位置。

如果您想保留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;
}

右边的浮子不会漂浮在盒子内，而是漂浮在盒子的外面

1 个答案: