Fatal编程技术网
  • html/
  • Html 为什么css内联块不适用于另一个div中的div？

Html 为什么css内联块不适用于另一个div中的div？

html css

Html 为什么css内联块不适用于另一个div中的div？,html,css,display,Html,Css,Display,我正在尝试创建一个导航菜单。我有一个用于主导航菜单的div和另一个用于子菜单的内部div。下面是代码 <body> <nav> <div class="navbutton"> <a href="#">Home</a> </div> <div class="navbutton"> <a href="#"&

我正在尝试创建一个导航菜单。我有一个用于主导航菜单的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>
当我加载页面时，外部div（主导航菜单）工作正常，但是内部div（子菜单）是垂直对齐的，而不是水平对齐的，尽管.navbutton类是一个内联块。为什么会发生这种情况？

因为“宽度：100px；”，所以子菜单项将采用父菜单的全部/相同宽度。因此，由于“宽度：100px”，它无法水平对齐，因此子菜单项将采用父菜单项的全部/相同宽度。因此，它不能水平对齐

所有的
。导航按钮
都是
100px
宽的，即使是包含子菜单的按钮。更改为
最小宽度：100px
instead所有的
.navbutton
都是
100px
宽的，即使是包含子菜单的按钮也是如此。更改为
最小宽度：100px取而代之

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