li 元素堆叠而不对齐

Question

Hi so I'm trying to align my navigation menu where the links align on one line with each other. But instead of aligning they are stacking. I'm currently coding in dreamweaver. I don't know what's going on.

Here is my 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;
}

and the 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>

Can anyone explain to me what I am doing wrong.

I think this is the simplest way that I can break down what i'm asking for this site is asking me to write more because it's so much code here so this is just exrta writing.

Answer 1

Add the block below to your 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>

Answer 2

You need to set display property of each List item as Inline.

ul li{
 display: inline;
}

Answer 3

ul{
  list-style: none;
position: absolute;
left: 0px;

}

li>a{
  display:inline;
}

li{
  display:inline-block;
}

implement these css properties , you should get it inline

working fiddle

Answer 4

You should follow proper way to apply 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;
      }

Answer 5

Remove the greater sign in css in between the element

ex:

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

write like this

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

The greater than sign (>) selector in CSS is used to select the element with a specific parent. It is called as element > element selector. It is also known as the child combinator selector which means that it selects only those elements which are direct children of a parent. It looks only one level down the markup structure and not further deep down. Elements which are not the direct child of the specified parent is not selected.

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