Amount-Based Formatting
The solution I came up with may not be as advanced as some other methods I've seen, including those that perform arithmetic calculations during the render (to that end, since there aren't any calculations, it may render marginally faster, but that's beside the point). However, it strikes me as more easily read, and so for my purposes is superior.
I reasoned that some combination of complex selectors could be employed to specify exactly which elements I wanted to format. The choices were nth-child, nth-last-child, first-child, and last-child. Initially, I did nav>ul>li:nth-child(n):last-child as my selector, but ran into issues when trying to also select all sibling elements. So instead, I decided to select based on the last child element.
nav>ul>li{
width: 100%;
display: inline-block;
/* If border, padding, or margin are desirable aesthetically, then a separate
element should be put inside the LI element and formatted to include it */
margin: 0;
padding: 0;
border: 0;
}
nav>ul>li:nth-last-child(2):first-child,
nav>ul>li:nth-last-child(2):first-child ~ li {
width: 50%;
}
nav>ul>li:nth-last-child(3):first-child,
nav>ul>li:nth-last-child(3):first-child ~ li {
width: 33%;
}
nav>ul>li:nth-last-child(4):first-child,
nav>ul>li:nth-last-child(4):first-child ~ li {
width: 25%;
}
nav>ul>li:nth-last-child(5):first-child,
nav>ul>li:nth-last-child(5):first-child ~ li {
width: 20%;
}
/* Repeat ad nauseum */
In this method, the first child of N siblings is selected, and then all of its siblings are also selected.
Non-Uniform Formatting
With this methodology, you could also get clever and change the rules depending on how many siblings there are. This example sets the first and last LI elements at 20% width, and the middle one at 60% width (could be good for some layout purposes, and it's something calculations would be hard-pressed to accomplish in some cases):
nav>ul>li:nth-last-child(3):first-child,
nav>ul>li:nth-last-child(3):first-child ~ li:last-child {
width: 20%;
}
nav>ul>li:nth-last-child(3):first-child ~ li:nth-child(2) {
width: 60%;
}
Fixing the White Space Problem
I'll have to do some digging, because I actually found this solution here, and I want to give credits where it's due, but I'm having a hard time tracking it down (if a moderator who knew where it was wanted to edit it in, I'd be greatly appreciative). Basically, the gist of the problem is that inline-block elements are rendered as text, and so all elements will have at least one non-breaking space between them.
There are three solutions to this that I've seen, and each has its advantages and disadvantages.
Removing the Space
As described here, this method removes the space from between the elements. This is probably the preferred method semantically, because it relies the least on formatting tomfoolery. The drawback of this method is that the more complex the elements in question, the more obfuscated it can become. In essence, the code in question becomes this:
<nav>
<ul>
<!-- Items here may vary //-->
<li>Option</li><li>Option</li><li>Option</li>
</ul>
</nav>
Floating the Elements
As described here, this method adds two simple CSS attributes to the LI elements. It first floats all of the elements to the left, setting them to display in order, before any rendered text, and then sets them to not try to clear one another. The major drawback to this one is that any other floating elements may interact with these elements, and floated elements also tend to misbehave more frequently than others (some browsers seem to be unsure of how to handle floating elements, especially in legacy). The rule would be:
nav>ul>li {
float: left;
clear: none;
}
Hiding the Text
This is the answer I'm having a hard time finding - needless to say, it is not my idea. It is, however, the solution that I employed for my situation. Assuming we don't want to obfuscate the code or float elements, with CSS, we still have control over how that text renders (and we must remember that a non-breaking space is still text). In essence, we're shrinking the text to font-size 0. The drawback here is that we then need to make sure that the LI elements (and their children) have a proper font size. This means we need two rules:
nav>ul {
font-size: 0;
}
nav>ul>li {
/* Note, you can change this as needed, just don't delete it. */
font-size: initial;
}
You may also need to write another rule, depending on how much control you have over the LI element's contents:
nav>ul>li * {
/* Note, you can change this as needed, just don't delete it. */
font-size: initial;
}
Hope this has been helpful! :D
