HTML CSS В шапке элементы идут по порядку, но один элемент "Авторизация" должен быть справа в шапке. Как сделать?

Question

 <!DOCTYPE html>
  <html xmlns:th="http://www.thymeleaf.org">
    <head>
     <meta charset="utf-8">
      <title></title>
        <style>
          {
          box-sizing: border-box; 
          }

        body {
              background-attachment: fixed; /*Фиксация картинки*/
              background-position: center top;
              }

        h1.name{
                color: #ba1c85; /* Цвет текста всего шрифта  */
               }

                /*Прозрачность шапки*/ 
        nav ul {
                  opacity: 0.8;
                }

                /*Слова в шапке без подчеркивания линией*/
        nav a {
                text-decoration: none;
              }

                   /*Шапка бара*/
        .topmenu {
                  width: 100%; /*Резиновая шапка*/
                  padding-bottom: 25px; /*Отступы*/
                  padding-top: 25px; /*Отступы*/
                  padding-left: 25px; /*Отступы*/
                  padding-right: : 25px; /*Отступы*/
                  border-radius: 20px; /*Радиус бара*/
                  background-color:  #f2f2f2;
                }

                /*Расположение текста в баре*/
        .topmenu > li {
                  display: inline; /*текст в шапке в строчку*/ 
                  }


                /*Текст в шапке бара*/
        .topmenu > li > a {
                  font-family: 'Exo 2', sans-serif;
                  padding: 1%;/*Отступы между текстом в шапке*/
                  font-weight: bold; /*Жирный шрифт в баре*/
                  color: #003559; /*Цвет шрифта*/
                  }
                  
                /*Изменения цвета при наведении курсора*/
        .topmenu li a:hover {
                  color: #E6855F;
                }
      </style>

      
  <nav>
    <ul class="topmenu">
      <li><a href="#">Главная</a></li>
      <li><a href="#">Проживание</a></li>
      <li><a href="#">Инфаструктура</a></li>
      <li><a href="#">Прайс</a></li>
      <li><a href="#">Контакты</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Правила</a></li>
      <li><a href="#">Отзывы</a></li>
      <li><a href="#">Авторизоваться</a></li>
    </ul>
  </nav>

    </head>
  <body>
    <section>
      
    </section>
</body>

</html>

Как сделать чтобы "Авторизация" была в конце шапки?

Дополнение комментария:

"Авторизация" должна находиться всегда в правой части шапки.

Answer 1

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-attachment: fixed;
  /*Фиксация картинки*/
  background-position: center top;
}

h1.name {
  color: #ba1c85;
  /* Цвет текста всего шрифта  */
}


/*Прозрачность шапки*/

nav ul {
  opacity: 0.8;
}


/*Слова в шапке без подчеркивания линией*/

nav a {
  text-decoration: none;
}


/*Шапка бара*/

.topmenu {
  /*При необходимости подключаем скролл*/
  overflow-x: auto;
  /*Запрещаем перенос слов*/
  white-space: nowrap;
  width: 100%;
  /*Резиновая шапка*/
  padding: 25px;
  border-radius: 20px;
  /*Радиус бара*/
  background-color: #f2f2f2;
}


/*Расположение текста в баре*/

.topmenu>li {
  display: inline;
  /*текст в шапке в строчку*/
}


/*Текст в шапке бара*/

.topmenu>li>a {
  font-family: 'Exo 2', sans-serif;
  padding: 1%;
  /*Отступы между текстом в шапке*/
  font-weight: bold;
  /*Жирный шрифт в баре*/
  color: #003559;
  /*Цвет шрифта*/
}


/*Изменения цвета при наведении курсора*/

.topmenu li a:hover {
  color: #E6855F;
}


/*Добавляем свойство*/

@media screen and (min-width: 900px) {
  .float {
    float: right;
  }
}

<nav>
  <ul class="topmenu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Проживание</a></li>
    <li><a href="#">Инфаструктура</a></li>
    <li><a href="#">Прайс</a></li>
    <li><a href="#">Контакты</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Правила</a></li>
    <li><a href="#">Отзывы</a></li>
    <li class="float"><a href="#">Авторизоваться</a></li>
  </ul>
</nav>

БЛОГ НА HUSL

HTML CSS В шапке элементы идут по порядку, но один элемент "Авторизация" должен быть справа в шапке. Как сделать?

Ответы (1 шт):