Расположение пунктов меню в соответствии с их шириной в HTML - PullRequest
Новая
       26

Расположение пунктов меню в соответствии с их шириной в HTML

1 голос
/ 09 января 2012

Хотелось бы узнать, как лучше расположить пункты списка для приведенного ниже меню.Как если бы я упомянул элементы списка как Item1, tem2, Item3 и т. Д., Поскольку Item - это маленькое слово, оно занимает меньше места, и все выглядят хорошо по ширине, как показано ниже:

enter image description here Но еслиЯ беру имя как «Возможности», «Поддержка», «Как это работает?», Тогда оно не распределяется должным образом, так как оно показывает мне много места n между каждым элементом списка. Так есть ли лучший способ избавиться от этого такогокак расширенное меню по ширине или что-то в этом роде

enter image description here

Это мой 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, то это показывает мне это

enter image description here

1 Ответ

1 голос
/ 09 января 2012

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>

...