проблемы с панелью навигации при css и html - PullRequest
Новая
       7

проблемы с панелью навигации при css и html

0 голосов
/ 26 апреля 2020

enter image description here

Привет, у меня проблема с панелью навигации , кнопка входа и регистрации . Как переместить кнопку регистрации вправо? Ближе? Кроме того, что касается меню, оно не отображается на выходе? Я не могу найти никаких проблем в коде.

это код html: 

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

body {
  font-family: arvo;
  font-size: 16px;
}

a {
  text-decoration: none;
}

.logo {
  cursor: pointer;
  height: 50px;
  width: 10%;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 80px;
  box-shadow: 0 2px 5px #000;
  width: 100%;
  height: 60px;
  background-color: #fff;
}

.Nav-center {
  list-style: none;
}

.Nav-center li {
  display: inline-block;
  padding: 0 15px;
  text-transform: uppercase;
}

.Nav-center li a {
  color: #000;
  display: block;
}

.Nav-center li a :hover {
  color: #fff;
  background-color: #27d05f;
  transition: all 0.3s ease 0s;
}

.btn-right {
  float: right;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 30px;
  border-radius: 5px;
  background-color: #27d05f;
}
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <link rel="stylesheet" href="style.css" />

  <title>Aunty grocery</title>

</head>

<body>

  <header>

    <img class="logo" src="Logo.png" alt="" />

    <nav>

      <ul class="Nav-center">

        <li><a href="#">Home</a></li>

        <li><a href="#">About Us</a></li>

        <li><a href="#">Grocery</a></li>

        <li><a href="#">Contact Us</a></li>

      </ul>

    </nav>

    <a class="btn-right" href="#">Sign Up</a>

    <a class="btn-right" href="#">Sign In</a>

  </header>

</body>

</html>

Ответы [ 3 ]

0 голосов
/ 26 апреля 2020

В связи с тем, что стиль: hover не применяется, у вас немного неверный синтаксис в CSS. Его следует изменить на 

.Nav-center li a:hover {
  color: #fff;
  background-color: #27d05f;
  transition: all 0.3s ease 0s;
}

Обратите внимание, что после 'a'

нет пробела
0 голосов
/ 26 апреля 2020

Элемент header имеет свойство css justify-content:, установленное на space-between;. Это означает, что заголовок представляет собой контейнер flexbox, в котором все элементы будут распределены равномерно с «равномерным пространством между каждым элементом».

Лучший способ получить желаемый результат - поместить обе кнопки в один родительский элемент в заголовке (a div), а затем применить небольшое левое поле к кнопке для правильно (margin-left: 2%; например).

Ограничьте ширину нового элемента контейнера кнопки до определенной максимальной ширины в%, rem или px или просто установите width: max-content;.

Кнопки теперь будут ближе друг к другу.

Сохраняйте значение justify-content таким, как оно есть, чтобы правая кнопка перемещалась в крайнюю правую часть контейнера внешней страницы.

0 голосов
/ 26 апреля 2020

Так как вы используете space-between, то таким образом разбивает каждый элемент.

То, что вы могли бы сделать, это обернуть две кнопки в <div>, чтобы они рассматривались как один элемент в заголовке : 

<div>
  <a class="btn-right" href="#">Sign Up</a>

  <a class="btn-right" href="#">Sign In</a>
</div>

Затем вы можете добавить поле для кнопок, чтобы между ними было свободное пространство: 

.btn-right {

float: right;

cursor: pointer;

color: #fff;

font-size: 16px;

letter-spacing: 2px;

text-transform: uppercase;

padding: 10px 30px;

border-radius: 5px;

background-color: #27d05f;

margin: 0 10px;
}
...