navigation menu not going into display: inline block

Question

i'm making an navigation menu that i want to position on the top right of my page. I want the items to be aligned horizontally, but i cant seem to get it working. This is driving me absolutely insane because i cant figure out what i'm doing wrong. I would really appreciate some help.

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. Please create a [mcve] demonstrating your problem (edit your question and press the snippet button to make runnable code from the rendered html and css that can demonstrate your issue). 2. Isn't working covers a lot of things. Please explain what exactly is not working — Pete, Feb 20 '19 at 15:20

score 2 · Accepted Answer · answered Feb 20 '19 at 15:24

> selects immediate children Read more here

The right code will be

.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{

                    }
                }
            }
        }

Hence ul is not the immediate children of main-nav

navigation menu not going into display: inline block

1 Answers1