li 元素堆叠且不对齐

Question

您好，我正在尝试对齐我的导航菜单，其中的链接彼此排成一行。但不是对齐，而是堆叠。我目前在 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>

任何人都可以向我解释我做错了什么。

我认为这是最简单的方法，我可以分解我对这个网站的要求是要求我写更多，因为这里有太多代码，所以这只是 exrta 写作。

Answer 1

将下面的区块添加到您的 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

您需要将每个列表项的显示属性设置为内嵌。

ul li{
 display: inline;
}

Answer 3

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

}

li>a{
  display:inline;
}

li{
  display:inline-block;
}

实施这些 css 属性，您应该内联

工作fiddle

Answer 4

您应该按照正确的方式申请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

删除元素

之间css中的大号

例如：

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

这样写

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

大于号 (>) select或 CSS 用于 select 具有特定父元素的元素。它被称为元素 > 元素 select 或。它也被称为子组合器 select 或这意味着它 select 仅是父元素的直接子元素。它看起来只是标记结构的下一层，而不是更深的层次。不是指定父项的直接子项的元素不是 selected。

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

li 元素堆叠且不对齐

li elements stacking and not aligning

html

css

navigation