html - 为什么我的导航栏是垂直的而不是水平的

问题描述

我试过改变显示并摆脱一些代码？可能删除了错误的东西或某些代码重叠？我是网络开发的新手，所以如果你能解释我做错了什么，那将非常感谢。查看此 JSFiddle 链接上的代码。https://jsfiddle.net/galbruh/htsrmy0L/2/#&togetherjs=PjjPVg1cOR

.toc-nav {
  float: left;
  /*list-style: none;*/
  margin-top: 2%;
  /*margin-left: 10%;
    margin-right: 0%;*/
width: 100%;
  text-align: center;
}

.toc-nav li {
  display: incline;
  list-style-type: none;
}

.toc-nav li a {
  color: white;
  text-decoration: none;
  padding: 10px 70px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

.toc-liv li.active a {
  border: 1px solid white;
}

.toc-nav li a:hover {
  border: 1px solid white;
}

@media screen and (max-width: 500px) {
  .toc-nav li a {
    float: left;
    /*display: none;*/
    width: 100%;
    text-align: left;
  }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome</title>
    <link rel="stylesheet" type="text/css" href="css/mystyle.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="js/classie.js"></script>

    <style>
        body,html {
            height: 100%;
            margin: 0;
            background-color: #2f3036;

        }

        b {
          color: black;
          font-family: "Teodor";
          font-size: 25px;
        }

        .bg {
            /* The image used */
            background-image: url("images/logo.png");

            /* Full height */
            height: 100%;

            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        label {
            color: white;
        }
    </style>

</head>

<body>

    <header id="top"></header>

    <nav role="navigation">
        <ul class="toc-nav">
            <li><a href="#about">About</a></li>
            <li><a href="#albums">Albums</a></li>
            <li><a href="#music">Music</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>


    <div class="bg"></div>

标签： htmlcssvisual-web-developer

html - 为什么我的导航栏是垂直的而不是水平的

问题描述

解决方案

推荐阅读