Попытка автоматически рассчитать ширину навигационных кнопок на основе контейнера

Question

У меня есть, например, 3 кнопки.

<ul id="container" style="width:500px">
    <li>home</li>
    <li>another button</li>
    <li>ok</li>
</ul>

Я хочу выяснить, какую ширину должна иметь каждая кнопка, чтобы они были распределены в контейнере. Я пробовал это, но выглядит не очень хорошо:

ширина контейнера 500px, деленная на общее количество символов 20. Это дает мне 25px для каждого символа

Таким образом, я делаю «домой» 100px (4 символа x 25), «еще одну кнопку» 350 px (14 символов x 25), «ok» 50px (2 символа x 25), что составляет 500px, но выглядит не очень хорошо , Я хочу одинаковые отступы для каждой кнопки.

моя формула выглядит примерно так (не то же самое)

|  home  |         another button      | ok|

Хотелось бы ещё как

|   home    |    another button    |   ok   |

какие-либо предложения по формуле для этого?

Answer 1

ОК, это хорошо работает:

        int containerWidth = 500
        int characterWidth = 9;  //this seems to work ok for a variety of font sizes
        int totalButtons = 3;
        int totalCharacters = 20;
        int allButtonsWidth = (characterWidth  * totalCharacters);  //(=180)
        int pixelsRemaing = ((containerWidth - allButtonsWidth ) / totalButtons); //(=106)
        int leftOvers = (containerWidth - ((totalCharacters * characterWidth) + (pixelsRemaing * totalButtons)));   //  (=2)

        home = (characterWidth * 4) + pixelsRemaing + leftOvers ;    //(=142+2 = 144)
        anotherbutton = (characterWidth * 14) + pixelsRemaing;       //(=232)
        ok = (characterWidth * 2) + pixelsRemaing;                   //(=124) 
                                                                     // total: 500

Answer 2

Я бы не назначил конкретную ширину для кнопок, я бы просто дал им одинаковые отступы, а затем экспериментировал, пока интервал не выглядел правильно:

jsfiddle