导航菜单不显示：内联块答案

【问题标题】：navigation menu not going into display: inline block导航菜单不显示：内联块
【发布时间】：2019-07-14 07:46:03
【问题描述】：

我正在制作一个导航菜单，我想将它放在页面的右上角。我希望这些项目水平对齐，但我似乎无法让它工作。这让我非常疯狂，因为我无法弄清楚我做错了什么。非常感谢您的帮助。

HTML：

<div v-if="items" class="main-nav">
        <nav>
            <ul>
                <li v-editable="item" :key="index" v-for="(item, index) in items" :class="{ highlighted: item.highlighted }">
                    <LinkType class="nav-link" :link="item.link" :linkText="item.name">{{ item.name }}</LinkType>
                </li>
            </ul>
        </nav>
</div>

CSS：

.main-nav
        {
            width: auto;
            height: auto;

            position: absolute;

            top: 0;
            right: 0;

            float: right;

            transform: translateX(0%);

            background: #424242;

            > ul
            {

                > li
                {
                    display: inline-block;
                    .nav-link{

                    }
                }
            }
        }

【问题讨论】：

1.请创建一个minimal reproducible example 来演示您的问题（编辑您的问题并按下 sn-p 按钮以从呈现的 html 和 css 中生成可运行的代码来演示您的问题）。 2. 不工作涉及很多事情。请解释到底是什么不工作

标签： html css sass styles

【解决方案1】：

> 选择直系子代 Read more here

正确的代码是

.main-nav
        {
            width: auto;
            height: auto;

            position: absolute;

            top: 0;
            right: 0;

            float: right;

            transform: translateX(0%);

            background: #424242;

           ul
            {

                > li
                {
                    display: inline-block;
                    .nav-link{

                    }
                }
            }
        }

因此 ul 不是 main-nav 的直接子代

【讨论】：