Проблемы с изображением Lo go в панели навигации - PullRequest
Новая
       7

Проблемы с изображением Lo go в панели навигации

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

Я хотел бы знать, как поместить изображение lo go слева и кнопку входа и регистрации справа. Кроме того, как разместить их внутри на панели навигации?

Это рабочий пример моего кода во фрагменте ниже: 

* {
  padding: 0;
  margin: 0;
}


/*Menu*/

Logo {
  float: left;
  line-height: 50px;
  padding: 10px 0px;
}

nav {
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
  position: fixed;
}

nav ul {
  list-style-type: none;
  text-align: center;
}

nav ul li {
  display: inline-block;
  justify-content: space-between;
  line-height: 50px;
  width: 100px;
  vertical-align: top;
}

nav ul li a {
  text-decoration: none;
  color: #000;
  display: block;
  font-size: 16px;
  font-family: Arvo;
}

nav ul li a:hover {
  background-color: #27D05F;
  transition: ease 1s;
  color: #fff;
}


/*Dropdownmenu*/

nav ul li ul li {
  display: none;
  background-color: #fff;
  width: 100px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}

nav ul:hover ul li {
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aunty Grocery</title>
  <link rel="stylesheet" type="text/css" href="Style.css">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>
  <nav class="w3-container w3-center w3-animate-left">
    <!--Logo-->
    <div class="logo">
      <img src="Image/Logo.png" alt="" width="50" height="50">
    </div>
    <!--Navigation-->
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About Us</a></li>
      <li><a href="grocery.html">Grocery</a>
        <ul>
          <li><a href="vegetables.html">Vegetables</a></li>
          <li><a href="meats.html">Meats</a></li>
          <li><a href="fish.html">Fish</a></li>
          <li><a href="fruits.html">Fruits</a></li>
          <li><a href="bakery.html">Bakery</a></li>
          <li><a href="others.html">Others</a></li>
        </ul>
      </li>
      <li><a href="career.html">Career</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <!--Account-->
  <a class="Register" href="Register.html"><button>Sign Up</button></a>
  <a class="Login" href="Login.html"><button>Sign In</button></a>
</body>

</html>

Это окончательный вывод того, что я достиг с кодами, которые я предоставил ранее:

enter image description here

Ответы [ 2 ]

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

Вы можете просто вырезать кнопки lo go и кнопки и вставить их в <li> примерно так

Помимо этого есть некоторые проблемы, которые я указал и исправил

  • <button> внутри <a> неправильный код
  • меню продуктов открывается даже при наведении на другую часть меню, оно должно открываться только при наведении курсора на продукт 

* {
  padding: 0;
  margin: 0;
}


/*Menu*/

Logo {
  float: left;
  line-height: 50px;
  padding: 10px 0px;
}

nav {
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
  position: fixed;
}

nav ul {
  list-style-type: none;
  text-align: center;
}

nav ul li {
  display: inline-block;
  justify-content: space-between;
  line-height: 50px;
  width: 100px;
  vertical-align: top;
}

nav ul li a {
  text-decoration: none;
  color: #000;
  display: block;
  font-size: 16px;
  font-family: Arvo;
}

nav ul li a:hover {
  background-color: #27D05F;
  transition: ease 1s;
  color: #fff;
}


/*Dropdownmenu*/

nav ul li ul li {
  display: none;
  background-color: #fff;
  width: 100px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}

nav ul li#food_items:hover ul li {
  display: block;
}

#signup_btn,
#signin_btn {
  cursor: pointer;
}
image
0 голосов
/ 18 апреля 2020

вы можете использовать flexbox в элементе nav для создания этого макета 

nav {
  display: flex; // with this option you set the nav as flex container
  align-items: center; // with this option you center your flex elements (the logo for example) in the y axis
  justify-content: space-between; // with this option you set dynamically the left and right space in the flex items (like the logo)
}

здесь вы можете увидеть окончательную реализацию https://codesandbox.io/s/sleepy-cdn-k92lp?file= / src / styles. css

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...