Почему веб-браузер перевернул мои пункты меню?

Question

У меня есть главное меню, и в HTML-коде оно находится в правильном порядке, но при просмотре в браузере оно переворачивается. Почему?

HTML:

  <div class="header">
    <img src="images/JTS_1_B_FL31.png" alt="J.T.S Logo" class="logo" />
    <ul class="menu">
      <li class="current"><a href="index.php">Home</a></li>
      <li><a href="services.php">Services</a></li>
      <li><a href="support.php">Support</a></li>
      <li><a href="contact.php">Contact Us</a></li>
      <li><a href="myaccount/">My Account</a></li>
    </ul>
  </div>

CSS:

.header{
  width: 100%;
  height: 30px;

  background-color: #1D242D;
}
.logo{
  padding: 5px 0 0 5px;
  float: left;
  }
.menu{
  float: right:
}
li{
  display: inline;
  list-style: none;
  float: right;
  padding: 5px 5px 7px 5px;

}

Скриншот:

Answer 1

У вас есть всплывающее окно LI: справа и всплывающее меню справа # #, которое будет располагаться справа налево.Вы можете попробовать float: left на них, возможно, попробовать без атрибута float в #menu и LI.

Answer 2

Когда вы используете CSS для правильного размещения, они прикрепляются к правой части страницы в том порядке, в котором вы их перечислили.

В этом случае «Дом» прикрепляется к правой части страницы, затем «Услуги» прикрепляются как можно правее (в конечном итоге к левому краю «Дом»).

Вам необходимо либо изменить порядок вашего списка (так как это ожидаемое поведение), либо, возможно, поместить весь список в один элемент div с плавающей точкой.

Answer 3

float: справа в том же элементе box помещаются элементы, добавленные позже слева от ранее плавающего справа элемента. если вам не нравится предложение Джареда, вы можете добавить их в обратном порядке.

Answer 4

Вы перемещаете каждый элемент списка <li>. Это приводит к тому, что каждый новый элемент списка появляется слева от ранее всплывающих элементов.

Answer 5

Потому что вы сказали элементам списка float: right.Они делают именно то, что вы им сказали.Если вы оставите элементы li с display: inline и удалите декларацию float, они должны появиться в правильном порядке, а само меню все еще будет перемещено вправо.

Кажется, что работает (обратите внимание наизменение цвета элементов a, сине-черным было больно пытаться читать): JS Fiddle .