导航菜单不进入显示：内联块

Question

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

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{

                    }
                }
            }
        }

Answer 1

>选择直接的孩子qazxsw poi

正确的代码将是

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{

                    }
                }
            }
        }

不是主导航的直接子女