Равномерного распределения кнопок (разная ширина) вдоль панели навигации

Question

У меня есть основная панель навигации 7 пунктов:

<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Company</a></li> 
     <li><a href="#">Management</a></li> 
     <li><a href="#">Projects</a></li> 
     <li><a href="#">Development Services</a></li> 
     <li><a href="#">Newsroom</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 

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

Единственный способ, которым я знаком с кнопками распространения, - добавить маржу справа к каждому, кроме последнего. Проблема в том, что, если я это сделаю, я могу приблизиться к тому, чтобы последняя кнопка достигла нужного края, но только вполне.

Я прочитал решение, в котором кнопки имели равные% ширины (например, 4 кнопки с шириной 25%), но в моем случае у меня длинные кнопки и короткие, и я хочу, чтобы промежутки между кнопками оставались постоянными , Как я могу сделать так, чтобы они автоматически распространялись?

Это CSS я использую прямо сейчас (бар нав 836 пикселей в ширину и все кнопки имеют разделение 16px между ними):

header nav{ 
padding: 12px 62px; 
width:836px; 
margin-left: auto; 
margin-right: auto; 
} 

header nav ul { 
list-style-type: none; 
} 

header nav ul li{ 
display: inline-block; 
} 

header nav ul li a{ 
margin-right:16px; 
} 

header nav ul li:last-child a{ 
margin-right:0px; 
} 

Спасибо за вашу помощь.

Answer 1

Использование : первый-of тип и : последний тип, чтобы поплавок первого и последнего Ли в нужные позиции, затем разделите оставшееся пространство между остальными членами LI.

* { 
 
    margin: 0 auto!important; 
 
} 
 

 
ul { 
 
    text-align: center; /* Distribute the none floated LI'S evenly */ 
 
    width: 650px; 
 
    padding: 0; 
 
} 
 

 
ul li { 
 
    display: inline; 
 
    padding: 0 10px 0 10px; 
 
    margin: 0; 
 
} 
 

 
ul li:first-of-type { /* Refers to the first Li */ 
 
    float: left; 
 
    padding-left: 0; 
 
} 
 

 
ul li:last-of-type { /* Refers to the last Li */ 
 
    float: right; 
 
    padding-right: 0; 
 
}

<ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Company</a> 
 
    </li> 
 
    <li><a href="#">Management</a> 
 
    </li> 
 
    <li><a href="#">Projects</a> 
 
    </li> 
 
    <li><a href="#">Development Services</a> 
 
    </li> 
 
    <li><a href="#">Newsroom</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
</ul>

Answer 2

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

использовать это как файл CSS:

header nav{ 
padding: 12px 62px; 
width:836px; 
margin-left: auto; 
margin-right: auto; 
} 

header nav ul { 
list-style-type: none; 
} 

header nav ul li{ 
display: inline-block; 
} 

header nav ul li a{ 
margin-right:16px; 
} 

header nav ul li:last-child a{ 
margin-right:0px; 
} 

ul li { 
display: inline; 
}