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

【问题标题】：CSS: Topbar with horizontal scroll and dropdown buttonsCSS：带有水平滚动和下拉按钮的顶部栏
【发布时间】：2019-11-19 11:21:35
【问题描述】：

我正在尝试创建一个可以在小屏幕中水平滚动的顶栏。问题是，将 '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>

【问题讨论】：

标签： html css overflow navbar

【解决方案1】：

这段代码有用吗？

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

        /* phone size */

        .dropdown-btn {
            display: none;
        }
        @media only screen and (max-width: 600px) {

            .topbar {
                overflow-y: hidden;
            }

            .dropdown-btn {
                display: inline-block;
            }

            .dropdown {
                display: none;
            }
        }
    </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>

            <!-- buttons link -->
            <button class="dropdown-btn" type="button" href="#">Link 1</button>
            <button class="dropdown-btn" type="button" href="#">Link 2</button>
            <button class="dropdown-btn" type="button" href="#">Link 3</button>

        </div>
    </div>
</body>

</html>

我基本上使用媒体查询来区分浏览器的大小。在此示例中，我只是针对手机尺寸进行此操作，但这可以应用于您想要的任何尺寸。

【讨论】：

谢谢。将下拉选项设置为栏中的单个项目的想法可能是一个不错的选择。

【解决方案2】：

试试这个

   <!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>

【讨论】：

感谢您的回答，但 'flex-wrap:wrap' 属性确实是不受欢迎的。我希望栏的内容在栏变为可水平滚动时保持内联，而下拉菜单、工具栏和任何其他可扩展元素在栏外保持正常可见。再次感谢。