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:UsersTerrellDocumentsDesignsGetVersedsiteversedlogo.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

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

ul li{
display: inline;
}

Answer 2

将下面的块添加到你的 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:UsersTerrellDocumentsDesignsGetVersedsiteversedlogo.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 3

ul{
list-style: none;
position: absolute;
left: 0px;
}
li>a{
display:inline;
}
li{
display:inline-block;
}

实现这些CSS属性，你应该内联获取它

工作小提琴

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;
}

CSS 中的大于号 (>( 选择器用于选择具有特定父元素的元素。它被称为元素>元素选择器。它也被称为子组合器选择器，这意味着它只选择那些是父级的直接子元素。它只在标记结构中向下看一个级别，而不是更深。不会选择不是指定父级的直接子级的元素。

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