JSFiddle - React, Tailwind, and code Playground

by sulfureous

HTML

<ul class="menu-header-menu">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
    <li><a href="#">Menu Item 5</a></li>
    <li><a href="#">Menu Item 6</a></li>
</ul>

CSS

.menu-header-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-header-menu li {
    float: left;
    text-align: center;
}
.menu-header-menu li a {
    background: #eee;
    padding: 5px;
    display: block;
}

JavaScript

$(function(){
    var children = $('.menu-header-menu').children().length;
    if (children >= 1) {
        var theMath = 100 / children;
        $('.menu-header-menu li').css('width', theMath +'%');
    }
});