JSFiddle - React, Tailwind, and code Playground

by drublic

HTML

<ul class="navigation">
    <li>
        <a href="#">Check this</a>
    </li>

    <li>
        <a href="#">Or this</a>
        <ul class="centered">
            <li><a href="#">Second_lvl_with_arbitrary_width</a></li>
        </ul>
    </li>
</ul>

CSS

/**
 * Horizonal centering with position: absolute;
 */

.navigation > li {
    position: relative;
    display: inline;
    background: #eee;
    margin: 0 10px;
    padding: 10px;
    text-align: center;
}

/* Should be centered */
.centered {
    position: absolute;
    background: #ddd;
    padding: 10px;
}

.navigation ul li {
    display: block;
}


ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

JavaScript

$('.navigation').children().each( function() {
    console.log($(this).outerWidth());
});