Question

我正在尝试制作导航栏。但是我在实施过程中发现了令人困惑的事情。

问题是关于css文件中的.navbar类。为什么overflow: hidden会使导航栏变宽？

这是我的代码：

body {
    margin: 0;
    padding: 0;
    font-family: Arial; 
}
.navbar {
    background-color: #f3f2f6;
    border: 1px solid #e9e8e9;
    overflow: hidden;  /* why overflow: hidden ????? */
}
.navbar button {
    background-color: inherit; 
    padding: 14px 16px;
    float: left;
    border: none; 
    outline: none; 
    cursor: pointer;
}
.navbar button:hover {
    background-color: #c6c5c6;
}

<body>
    <p>
        Click on the buttons inside the tabbed menu:
    </p>

    <div class="navbar">
        <button >London</button>
        <button >Paris</button>
        <button >Tokyo</button>
    </div>
</body>

没有溢出的屏幕截图：

有溢出的屏幕截图：

为什么“溢出：隐藏”使导航栏全宽？

0 个答案: