为什么 css 内联块对另一个 div 中的 div 不起作用？

Question

我正在尝试创建导航菜单。我有一个 div 用于主导航菜单，另一个在 div 内用于子菜单。下面是代码

<body>
    <nav>
        <div class="navbutton">
            <a href="#">Home</a>
        </div>

        <div class="navbutton">
            <a href="#">Products</a>
            <div class="dropdownbox">
                <div class="navbutton">
                    <a href="#">None</a>
                </div>
                <div class="navbutton">
                    <a href="#">None</a>
                </div>
                <div class="navbutton">
                    <a href="#">None</a>
                </div>
            </div>
        </div>

        <div class="navbutton">
            <a href="#">Contact</a>
        </div>
    </nav>
</body>

CSS:

.navbutton {
    background-color: blanchedalmond;
    padding: 11px 25px;
    width: 100px;
    text-align: center;
    display: inline-block;
}

当我加载页面时，外部 div（主导航菜单）工作正常，但内部 divs（子菜单）尽管 .navbutton [=22] 是垂直对齐而不是水平对齐=] 是一个内联块。为什么会这样？

Answer 1

因为 "width: 100px;" 所以子菜单项将采用父级的 full/same 宽度。因此，它不能水平排列

为什么 css 内联块对另一个 div 中的 div 不起作用？

Why is css inline-block not working for a div inside another div?

html

css

display