时间戳

首页 > 解决方案 > CSS：带有水平滚动和下拉按钮的顶部栏

html - CSS：带有水平滚动和下拉按钮的顶部栏

问题描述

我正在尝试创建一个可以在小屏幕中水平滚动的顶栏。问题在于，将“overflow-x”分配给 auto 也会将“overflow-y”设置为 auto，因此栏中的任何下拉按钮（或工具提示等）都会触发垂直滚动。

是否可以只有水平滚动，无论是溢出还是以任何其他方式？

我创建了一个简单的演示来演示这个问题。如果您减小浏览器的宽度，则会出现水平滚动条（根据需要），但如果您将鼠标悬停在下拉按钮的顶部，则会出现垂直滚动条，并且下拉内容会“被困”在顶部栏中。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Title</title>
        
        <!-- CSS Classes -->
        <style>
            /* Topbar Classes */
            .topbar {
                display          : flex;
                justify-content  : space-between;
                position         : fixed;
                top              : 0;
                left             : 0;
                right            : 0;
                background-color : #dddddd;
                padding          : 0.5rem 2rem;
                overflow-x       : auto;
                white-space      : nowrap;
            }
            /* Dropdown Classes */
            .dropdown {
                position : relative;
                display  : inline-block;
            }
            .dropdown-content {
                display          : none;
                position         : absolute;
                background-color : white;
                min-width        : 100px;
                z-index          : 1;
            }
            .dropdown-content a {
                padding         : 4px;
                text-decoration : none;
                display         : block;
            }
            .dropdown-content a:hover {
                background-color : #f1f1f1
            }
            .dropdown:hover .dropdown-content {
                display : block;
            }
        </style>
    </head>

    <body>
        <!-- Navigation -->
        <div class="topbar">
            <div style="display:inline-block;margin-right:12px">
                <div style="display:inline-block;padding:4px"><span>Navigation Top Bar Title</span></div>
                <div style="display:inline-block;padding:4px"><span>&gt;</span></div>
                <div style="display:inline-block;padding:4px"><span>App Information</span></div>
            </div>
            <div style="display:inline-block">
                <!-- Quick Search Input -->
                <div style="float:left;margin-right:3px"><input type="text" placeholder="Quick Search..."></div>
                <!-- Buttons -->
                <button type="button">Search</button>
                <button type="button">New</button>
                <button type="button">Save</button>
                <button type="button">Clear</button>
                <button type="button">Copy</button>
                <button type="button">Paste</button>
                <button type="button">Delete</button>
                <button type="button">Help</button>
                <!-- Dropdown Button -->
                <div class="dropdown">
                    <button>Dropdown</button>
                    <div class="dropdown-content">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                </div>
            </div>
        </div>
    </body>

    </html>

标签： htmlcssoverflownavbar

解决方案

尝试这个

   <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Title</title>

    <!-- CSS Classes -->
    <style>
        /* Topbar Classes */
        .topbar {
            display          : flex;
            flex-wrap: wrap;
            justify-content  : space-between;
            position         : fixed;
            top              : 0;
            left             : 0;
            right            : 0;
            background-color : #dddddd;
            padding          : 0.5rem 2rem;
            overflow-x       : auto;
            white-space      : nowrap;
        }
        /* Dropdown Classes */
        .dropdown {
            position : relative;
            display  : inline-block;
        }
        .dropdown-content {
            display          : none;
            position         : absolute;
            background-color : white;
            min-width        : 100px;
            z-index          : 1;
            left: -20px;
        }
        .dropdown-content a {
            padding         : 4px;
            text-decoration : none;
            display         : block;
        }
        .dropdown-content a:hover {
            background-color : #f1f1f1
        }
        .dropdown:hover .dropdown-content {
            display : block;
        }
    </style>
</head>

<body>
    <!-- Navigation -->
    <div class="topbar">
        <div style="display:inline-block;margin-right:12px">
            <div style="display:inline-block;padding:4px"><span>Navigation Top Bar Title</span></div>
            <div style="display:inline-block;padding:4px"><span>&gt;</span></div>
            <div style="display:inline-block;padding:4px"><span>App Information</span></div>
        </div>
        <div style="display: flex;flex-wrap: wrap;">
            <!-- Quick Search Input -->
            <div style="float:left;margin-right:3px"><input type="text" placeholder="Quick Search..."></div>
            <!-- Buttons -->
            <button type="button">Search</button>
            <button type="button">New</button>
            <button type="button">Save</button>
            <button type="button">Clear</button>
            <button type="button">Copy</button>
            <button type="button">Paste</button>
            <button type="button">Delete</button>
            <button type="button">Help</button>
            <!-- Dropdown Button -->
            <div class="dropdown">
                <button>Dropdown</button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

推荐阅读