为什么我的侧边导航栏与网页上的文字重叠答案

【问题标题】：Why is my side navigation bar overlapping the text on the web pages为什么我的侧边导航栏与网页上的文字重叠
【发布时间】：2021-12-17 22:54:14
【问题描述】：

所以我正在使用 django 创建一个网站，但我的 CSS 和/或 HTML 代码肯定有问题，当我运行服务器时，页面上的文本被我拥有的 sidenav 栏覆盖。我之前为 sidenav 设置了宽度，但删除了它，但这也不起作用，这里是代码：

<html>
<head>
    <style type="text/css">
        .sidenav {
            height: 100%;
            position: fixed;
            z-index: 1; 
            top: 0;
            left: 0;
            background-color: #111; 
            overflow-x: hidden; 
            padding-top: 20px; 
        }

        .sidenav a { 
            padding: 6px 8px 6px 16px;
            text-decoration: none;
            font-size: 25px; 
            color: #818181; 
            display: block;

        }


        .sidenav a:hover{  
            color: #f1f1f1; 
        }


        .main{
            margin-left: 160px;
            padding: 0px 10px;
        }


    </style>
    <title>{% block title %} My Website {% endblock %}</title>
</head>

<body>
    <div class="sidenav">
        <a href="/home">Home</a> 
        <a href="/create">Create</a>
        <a href="/6">View</a>
    </div>

    <div id="content", name="content"></div>
    {% block content %}
    {% endblock %}
</body>
</html>

【问题讨论】：

标签： html css django

【解决方案1】：

您没有使用您定义的main 类。此外，您的{ block content } 周围没有<div>。您可以尝试为sidebar 创建一个<div>，为{ block content } 创建一个<div>

【讨论】：