当像这样简单的事情让我卡住时,我感到非常沮丧!我尝试了很多不同的方法,但出于某种原因,它卡在了垂直显示中。
相关的 HTML
body {
margin: 0 auto;
max-width: 90%;
min-width: 45%;
background-color: #dadada;
height: 100%;
}
header {
background-color: black;
max-width: 90%;
min-width: 45%;
margin: 0 auto;
margin-top: 1%;
font-family: typographica;
padding: 45px;
}
.logo h1 {
text-align: center;
}
h1 {
color: white;
font-size: 300%;
margin-left: 3%;
position: absolute;
top: 2%;
}
ul li a {
color: white !important;
text-decoration: none;
width: 50%;
position: relative;
}
.nav li {
float: none;
display: inline;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Title</title>
<link href="../Style Docs/Home-page.css" type="text/css" rel="stylesheet" >
</head>
<body>
<header>
<div type="logo">
<h1>Name</h1>
</div>
<div type="head-wrap">
<ul type="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Discover</a></li>
<li><a href="#">Upload</a></li>
<li><a href="#">More</a></li>
</ul>
</div>
<div id="decoration-banner">
</div>
</header>
</body>
</html>
就像我说的,我尝试了很多不同的东西,但我一定遗漏了一些东西。我不确定这是因为我写 html 的方式还是什么,但我以前没有遇到过这个问题..
最佳答案
你的 CSS
正在寻找一个名为 .nav
的类(class).如果你看看你的 <ul>
, 你打算使用属性 class
而是使用 type
.
<ul type="nav">
</ul>
应该是
<ul class="nav">
</ul>
关于html - 导航不会显示内联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55126464/