javascript - Navigation bar with everything centered except one element floated right -

javascript - Navigation bar with everything centered except one element floated right -

i trying center 4 elements beside each other , have 1 floats right flex solution.

what best result if resize browser floated remain set , 4 elements take rest till no space left.

i've been trying find non-flex solution no hope of doing dynamic thing.

either have overlooked oblivious answers or it's not possible.

i can finish adjust code , add together js/jquery solutions - don't mind really.

appreciate help :)

here couple of options, 1 using float , sec using absolute positioning.

in first case, centering takes business relationship width of floated element.

in sec case, centering respect width of parent element.

the centering achieved using text-align: center on set of inline-block kid elements.

class="snippet-code-css lang-css prettyprint-override">.nav { padding: 0; margin: 0; overflow: auto; text-align: center; border: 1px dotted blue; position: relative; } .nav li { display: inline-block; border: 1px dotted blue; } .rightfloat { float: right; } .rightpos { position: absolute; right: 0; } class="snippet-code-html lang-html prettyprint-override"><p>ex 1:</p> <ul class="nav"> <li class="rightfloat">right most</li> <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> </ul> <p>ex 2:</p> <ul class="nav"> <li class="rightpos">right most</li> <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> </ul>

javascript html css