li элементы укладки и не выравнивания - PullRequest
Новая
       3

li элементы укладки и не выравнивания

0 голосов
/ 17 января 2020

Привет, поэтому я пытаюсь выровнять свое меню навигации, где ссылки выравниваются на одной строке друг с другом. Но вместо выравнивания они складываются. В настоящее время я пишу в Dreamweaver. Я не знаю, что происходит.

Вот мои css 

body, html {
   margin: auto;
   width: 100%;
   height: 100%;
}

.header {
   width: 100%;
   height: 100%;
   background: url("") no-repeat;
   display: block;
}

.header > .nav-container {
   width: 100%;
   height: 50px;
   padding-top: 0px;
   display: block;
}

.header > .nav-container > .logo {
   width: 100%;
   max-width: 196px;
   display: inline-block;
   margin-left: 20px;
   background: #000;
}

.header > .nav-container > .navigation {
   display: inline-block;
   width: 60%;
   background: #000;
}

.nav-container > ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333;
}

.nav-container > li {
   float: left;
   display:inline-block;
}

.nav-container > li a {
   display: inline-block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
}

.nav-container > li a:hover {
   background-color: #111;
}

.nav-container > .active {
   background-color: #4CAF50;
}

и html

<div class="header">
    <div class="nav-container">
    <div class="logo">
        <img src="C:\Users\Terrell\Documents\Designs\GetVersed\site\versedlogo.png">
    </div>

<!-- Naviagation -->
    <div class="navigation">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
       </ul>
    </div> 
<!-- End Navigation -->

</div>

Может кто-нибудь объяснить мне, что Я делаю не так

Я думаю, что это самый простой способ, с помощью которого я могу объяснить, что я прошу для этого сайта - попросить меня написать больше, потому что здесь так много кода, так что это просто написание.

Ответы [ 5 ]

0 голосов
/ 17 января 2020

Удалите больший знак в css между элементами

ex: 

.nav-container > li {
float: left;
 display:inline-block;
}

напишите так 

.nav-container li {
float: left;
 display:inline-block;
}

Знак больше (> ) селектор в CSS используется для выбора элемента с указанным c родителем. Он называется element> element selector. Он также известен как селектор дочернего комбинатора, который означает, что он выбирает только те элементы, которые являются прямыми потомками родителя. Он выглядит только на один уровень ниже структуры разметки, а не дальше вглубь. Элементы, не являющиеся прямым потомком указанного родителя, не выбраны.

https://www.geeksforgeeks.org/what-is-greater-than-sign-selector-in-css/

0 голосов
/ 17 января 2020

Вы должны следовать правильному способу подачи css 

body, html {
    margin:auto;
    width:100%;
    height:100%;
    }

    .header{
    width:100%;
    height:100%;
    background:url("") no-repeat;
    display:block;
    }

    .header > .nav-container{
    width:100%;
    height:50px;
    padding-top:0px;
    display:block;
    }

    .header > .nav-container > .logo{
    width:100%;
    max-width:196px;
    display:inline-block;
    margin-left:20px;
    background:#000;

    }

    .header > .nav-container > .navigation{
    display:inline-block;
    width:60%;
    background:#000;
    vertical-align: middle
    }

    .navigation > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }

    .navigation ul > li {
    float: left;
     display:inline-block;
    }

    .navigation ul > li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    .navigation ul > li a:hover {
     background-color: #111;
     }

     .navigation .active {
      background-color: #4CAF50;
      }
0 голосов
/ 17 января 2020

Вам необходимо установить свойство отображения каждого элемента списка как встроенное. 

ul li{
 display: inline;
}
0 голосов
/ 17 января 2020 
ul{
  list-style: none;
position: absolute;
left: 0px;

}

li>a{
  display:inline;
}

li{
  display:inline-block;
}

реализует эти css свойства, вы должны получить их встроенными

рабочая скрипка

0 голосов
/ 17 января 2020

Добавьте блок ниже к вашему css

.navigation ul {
  display: flex;
}

.navigation li {
  padding: 5px;
}


.navigation ul {
  display: flex;
}

.navigation li {
  padding: 5px;
}

body,
html {
  margin: auto;
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  height: 100%;
  background: url("") no-repeat;
  display: block;
}

.header>.nav-container {
  width: 100%;
  height: 50px;
  padding-top: 0px;
  display: block;
}

.header>.nav-container>.logo {
  width: 100%;
  max-width: 196px;
  display: inline-block;
  margin-left: 20px;
  background: #000;
}

.header>.nav-container>.navigation {
  display: inline-block;
  width: 60%;
  background: #000;
}

.nav-container>ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.nav-container>li {
  float: left;
  display: inline-block;
}

.nav-container>li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-container>li a:hover {
  background-color: #111;
}

.nav-container>.active {
  background-color: #4CAF50;
}
<div class="header">
  <div class="nav-container">
    <div class="logo">
      <img src="C:\Users\Terrell\Documents\Designs\GetVersed\site\versedlogo.png">
    </div>
    <!-- Naviagation -->

    <div class="navigation">
      <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <!-- End Navigation -->

  </div>
...