Верхнее меню - выровнять один элемент по правому краю

Хочу выровнять пункт «Логин» по правому краю. Я новичок в HTML и CSS. Я даже не знаю, правильный ли это подход к созданию горизонтальной строки меню. Примерно так: Как я хочу, чтобы это было

Вот мой код:

HTML:

@import url("FONTS/stylesheet.css");
body {
    font-family: 'Roboto', sans-serif;
}

.topnav {
    background-color: #333;
    overflow: hidden;
}

.topnav a {
    display: inline-block;
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

<!DOCTYPE html>
<html>
<link rel = "stylesheet" type = "text/css" href = "css/style1.css">
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet">
<body>

<div class = "topnav">
  <a class = "active" href = "#home">Home</a>
  <a href = "#projects">Projects</a>
  <a href = "#contact">Contact</a>
  <a class = "loginnav" href = "#login">Login</a>
</div>

</body>
</html>

Что мне нужно изменить? Большое спасибо!

html css alignment text-align

15.09.2018 14:31

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Измените .topnav на display: flex и добавьте margin-left: auto; в .loginnav:

body {
  font-family: 'Roboto', sans-serif;
}

.topnav {
  display: flex;
  background-color: #333;
  overflow: hidden;
}

.topnav a {
  display: inline-block;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.loginnav {
  margin-left: auto;
}

<div class = "topnav">
  <a class = "active" href = "#home">Home</a>
  <a href = "#projects">Projects</a>
  <a href = "#contact">Contact</a>
  <a class = "loginnav" href = "#login">Login</a>
</div>

15.09.2018 14:34

Ответ принят как подходящий

Вы можете просто добавить этот код в свой CSS, и он работает .topnav .loginnav {float:right;}

@import url("FONTS/stylesheet.css");
body {
    font-family: 'Roboto', sans-serif;
}

.topnav {
    background-color: #333;
    overflow: hidden;
}

.topnav a {
    display: inline-block;
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}


.topnav a:hover {
    background: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
.topnav .loginnav {
    float: right;
}

<!DOCTYPE html>
<html>

<link rel = "stylesheet" type = "text/css" href = "css/style1.css">
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet">

<body>

<div class = "topnav">
  <a class = "active" href = "#home">Home</a>
  <a href = "#projects">Projects</a>
  <a href = "#contact">Contact</a>
  <a class = "loginnav" href = "#login">Login</a>
</div>

</body>
</html>

15.09.2018 14:34

Просто добавьте это в свой код.

    .loginnav{
        margin-left:800px;
    }

когда ширина области просмотра изменится, это не сработает

— 15.09.2018 14:35

тогда вы просто можете использовать <meta name = "viewport" content = "width=device-width, initial-scale=1"> или @media

— 15.09.2018 14:36

15.09.2018 14:34

Вы можете просто сделать это с помощью гибкости и автоматического поля для входа в систему слева:

body {
    font-family: 'Roboto', sans-serif;
}

.topnav {
    background-color: #333;
    overflow: hidden;
    display: flex;
}

.topnav a {
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.loginnav {
    margin-left: auto
}

.topnav a:hover {
    background: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

<!DOCTYPE html>
<html>

<link rel = "stylesheet" type = "text/css" href = "css/style1.css">
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet">

<body>

<div class = "topnav">
  <a class = "active" href = "#home">Home</a>
  <a href = "#projects">Projects</a>
  <a href = "#contact">Contact</a>
  <a class = "loginnav" href = "#login">Login</a>
</div>

</body>
</html>

Обратите внимание, что я удалил inline-block из тега a и добавил к .topnav правило display: flex;

Во-первых, чтобы отобразить его как flex, а затем выровнять эти элементы до конца.

15.09.2018 14:36

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

@import url("FONTS/stylesheet.css");
body {
    font-family: 'Roboto', sans-serif;
}

.topnav {
    background-color: #333;
    overflow: hidden;
}

.topnav a {
    display: inline-block;
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.right {
position: absolute;

top: 8px;
right: 8px;
}

<!DOCTYPE html>
<html>
<link rel = "stylesheet" type = "text/css" href = "css/style1.css">
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet">
<body>

<div class = "topnav">
  <div class = "left">
  <a class = "active" href = "#home">Home</a>
  <a href = "#projects">Projects</a>
  <a href = "#contact">Contact</a>
  </div>
  <div class = "right">
  <a class = "loginnav" href = "#login">Login</a>
  </div>
</div>

</body>
</html>

Вероятно, это плохой способ, но он работает!

Извините, я просто хотел помочь вам быстро: P

— 15.09.2018 15:00

15.09.2018 14:57