Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

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

In lại Tác giả: Walker 123 更新时间：2023-11-28 09:45:45 34 4
mua khóa gpt4 Nike

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

#StickyBar #RightSideOfStickyBar
{
    float : right ;
}

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

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

这是 HTML5:

这是 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 ;
            }

câu trả lời hay nhất

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

từ 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, như hình dưới đây:

CSS

#StickyBar {
    tràn: ẩn;
}

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

Here is an example without position:fixed

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

Have a new layout example!

HTML

CSS

* {
    lề: 0;
    phần đệm: 0;
    kích thước hộp: hộp viền;
}

html,body {
    chiều cao: 100%;
    font: 100% Helvetica;
}

tiêu đề { 
    max-width: 1000px;
    height: 80px;
    background:linear-gradient(#0FF,#4D70DB);
    hiển thị: bảng;
    chiều rộng: 100%;
    lề: 0 tự động;
}

header nav { 
    hiển thị: ô bảng;
    căn chỉnh văn bản: trái;
    vertical-align: bottom;
}

header .signin {
    text-align: right;
}

Một {
    màu: #000;
    trang trí văn bản: không có;
    hiển thị: khối nội tuyến;
    phần đệm: 10px;
}

关于css - Float right 不会在框内 float ，而是在框外 float ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25265342/

34 4 0
Đề xuất bài viết: css - 如何更改 Leaflet for R 中的标题文本颜色？
Đề xuất bài viết: jquery - jVectorMaps定位
Đề xuất bài viết: javascript - ExtJS 4.1 或通用 Javascript HTTP_Authorization 函数
Đề xuất bài viết: css - 这可能吗？使用 CSS (Stylus) 迭代@keyframes
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress