html - 导航不会显示内联?

标签 html css

当像这样简单的事情让我卡住时,我感到非常沮丧!我尝试了很多不同的方法,但出于某种原因,它卡在了垂直显示中。

相关的 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">
        &nbsp;
    </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/

相关文章:

css - 有没有办法了解为什么 Firefox 选择 CSS 选择器而不是其他选择器?

javascript - 我可以使用 HTML5 作为服务器端语言,如 PHP、ASP.NET

css - 使用 CSS :not Selector for inner link

html - 如何制作表格行中某些(但不是全部)表格单元格的 Vue.js 组件?

javascript - FadeOut 元素到 FadeIn 另一个与 CSS 动画相同的地方

html - 具有 2 种不同背景(和 2 列)的 Bootstrap 全宽

css - 现代图片库 : fluid or elastic?

javascript - Select2 框包含不需要的文本

html - 模块出现两次元标签会伤害我的 SEO 吗?

javascript - 在 Javascript 中使用 X、Y 坐标裁剪图像