Горизонтальное меню ul выравнивание вправо и выравнивание влево

Question

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

У меня есть простое горизонтальное меню на веб-сайте. Я использую UL, чтобы все это работало. Вот мой код:

> <div id="nav">
>           <ul>
>                 <li><a href="#">Home</a></li>
>                 <li><a href="#">company</a></li>
>                 <li><a href="#">Products</a></li>
>                 <li><a href="#">Services</a></li>
>                 <li><a href="#">Involvement</a></li>
>                 <li><a href="#">Blog</a></li>
>                 <li class="right"><a href="#">Contact Us</a></li>
>             </ul>
>         </div> <!-- End Nav -->

Мой Css выглядит следующим образом:

    #nav ul{
    width:980px;
    margin:0;
    padding:0;
    border:1px solid red;
}
#nav ul li{ float:left;color:#FFF}

#nav ul li a {display:block;padding:5px 62px 0 0px; text-decoration:none; color:#FFF}
#nav ul li.right{float:right;margin-right: -30px;
}

Проблема, с которой я столкнулся, заключается в том, что последний элемент будет выровнен по правому краю, но теперь между второй вкладкой и последней вкладкой есть огромное пространство. Это из-за отступов, оставленных у меня в li части. Я просто хочу, чтобы первый текст выровнялся по левому краю, а последний текст выровнялся по правому краю, а остальные между ними должны иметь одинаковое пространство. Вы можете увидеть проблему здесь: http://jsfiddle.net/nathan1342/sPZG9/

Любая помощь будет принята с благодарностью !!

Спасибо!

Answer 1

вы не должны работать здесь с другими значениями с плавающей точкой. используйте вместо этого float: left для всех li и поместите первый и последний элемент абсолютно. поле-обертка #nav должно располагаться относительно.

<style>

#nav{
  position: relative;
  width:980px;
  margin:0;
  padding:0;
  height: 100px;
  border:1px solid red; 
}

#nav ul{
  display: block;
  margin: 0px auto;
  width: 600px;
}
#nav ul li {list-style: none}
#nav ul li a{display:block; float: left; padding:5px 62px 0 0px; text-decoration:none; color:#000;}


.left{
  position: absolute;
  top: 0px;
  left: 10px;
  text-align: left;
}

.right{
  position: absolute;
  top: 0px;
  right: 10px;
}

.right a {  padding-right: 0 !important;}

</style>

 <div id="nav">
           <ul>
                 <li class="left"><a href="#">Home</a></li>
                 <li><a href="#">company</a></li>
                 <li><a href="#">Products</a></li>
                 <li><a href="#">Services</a></li>
                 <li><a href="#">Involvement</a></li>
                 <li><a href="#">Blog</a></li>
                 <li class="right"><a href="#">Contact Us</a></li>
             </ul>
 </div> <!-- End Nav -->

Answer 2

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

#nav{
  position: relative;
  width:980px;
  margin:0 auto;
  padding:0;
  height: 40px;

}

#nav ul{
  display: block;
  margin: 0 0 0 -40px;
  width: 980px;
  font-size:20px;
}
#nav ul li {list-style: none}
#nav ul li a{display:block; float: left; padding:5px 68px 0 0px; text-decoration:none; color:#fff;}


.right{
  position: absolute;
  top: 0px;
  right: 10px;
}

.right a {  padding-right: 0 !important;}

Answer 3

попробуйте это:

http://jsfiddle.net/Szv5x/

Я использовал display: inline-block, изменил отступы, установил ширину, чтобы меню заполняло ширину, которую вы указали, равномерно расположенными элементами.

Answer 4

Ваш код здесь и код, указанный в ссылке jsfiddle, имеют различия, например, вы не разместили здесь тег #nav.Отрегулируйте ширину вашей ширины nav ul bar, для меня это не проблема, она хорошо отрисовывается с помощью ссылки «Свяжитесь с нами», растянутой до дальнего конца, а все остальное равно равномерно.

Answer 5

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

#nav ul{
    width:980px;
    margin:0;
    padding:0;
    border:1px solid red;
}
#nav ul li{ float:left;color:#fff;width:16%;}

#nav ul li a {display:block;text-decoration:none; color:#FFF;}
}

Это просто подыгрывает тому факту, что, поскольку мы знаем, что у вас есть 6 пунктов вВ списке каждый элемент должен занимать примерно 16% пространства.