Главное меню - выровняйте один элемент справа - PullRequest
Новая
       54

Главное меню - выровняйте один элемент справа

0 голосов
/ 15 сентября 2018

Я хочу выровнять пункт «Логин» вправо.Я довольно новичок в 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>

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

Ответы [ 5 ]

0 голосов
/ 15 сентября 2018

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

@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>

Это, вероятно, плохой способ, но он работает!

0 голосов
/ 15 сентября 2018

Вы можете просто сделать это с помощью flex и автоматической маржи входа слева: 

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, а затем выровняйте эти элементы до конца.

0 голосов
/ 15 сентября 2018

Вы можете просто добавить этот код в свой 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>
0 голосов
/ 15 сентября 2018

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

    .loginnav{
        margin-left:800px;
    }
0 голосов
/ 15 сентября 2018

Измените .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>
...