Организация пунктов меню в соответствии с их шириной в html

Question

Я хотел бы знать, как лучше расположить элементы списка для меню ниже. Как Если я упоминаю элементы списка как ITEM1, ТЭМ2, ст.3 и так далее, как Позиционный небольшое слово он занимает меньше места, и все смотрит отлично в ширину, как показано ниже:

Но если я имя «Функции», «Поддержка», «Как это работает?», то это не упорядочивает их должным образом, так как это показывает мне много места n между каждым элементом списка. Итак, есть ли лучший способ избавиться от этого, например, расширили меню, это ширина или что-то подобное

Это мой CSS для меню:

.menu 
{ 
    background-image: url('../images/header.png'); 
    background-repeat: no-repeat; 
} 


ul.menu { 
    display:block; 
    margin:0; 
    padding:0; 
    height:60px; 
    text-align:right; 
} 

ul.menu li { 
    display:inline-block; 
    width:50px; 
    height:30px; 
    margin-right:10px; 

}  

ul.menu li:first-child { 
    float:left; 
    margin-left:10px; 
} 

ul.menu li a 
{ 
    text-decoration: none; 
    padding: 15px 0; 
    width: 50%; 
    color: #eee; 
    float: left; 
    text-align: center; 
    font-weight: bold; 
    font-style: normal; 
    font-family: Verdana; 
} 

Это моя разметка:

<div class="menu"> 
     <ul class="menu"> 
      <li><a href ="#">Home</a></li> 
      <li><a href ="#">Features</a></li> 
      <li><a href ="#">Support</a></li> 
      <li><a href ="#">Blog</a></li> 
      <li><a href ="#">How it work's</a></li> 
     </ul> 
    </div> 

На самом деле в соответствии с Дереком ответ Если я изменил свою ширину 100px, то он показывает мне этот путь

Answer 1

width:50px; ваша проблема ,

Вы можете удалить его и:

1. вручную установить каждый элемент ИЛИ
2. создать функцию, чтобы измерить ширину его содержимое и настроить соответствующим образом или

3. оставить их без определенной ширины

   <li style="width: 60px;"><a href="#">Blog</a></li>

   <li style="width: 130px;"><a href="#">How it work's</a></li>