Question

我正在尝试删除侧边栏和顶部导航栏之间的顶部白色图层。无论我在.sidenav css中将“ top”值设置为什么，它要么覆盖导航栏，要么保留空白。这是空白的图像。如果我将“ top”值设置为0，则它会覆盖顶部导航栏，但是如果我将“ top”值设置为其他任何数字，则只会转到下图中的位置。

{%- extends "bootstrap/base.html" %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">
<style>
html, body {
    margin: 0;
    padding: 0;
}

.sidenav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 1;
    left: 0;
    background-color: rgb(54, 54, 54);
    overflow-x: hidden;
    padding-top: 20px;
  }

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

  .sidenav  {
    color: #f1f1f1;
  }

  .main {
      padding: 0px 250px;
  }
</style>
{% endblock %}
{% block content %}
<form method="POST" enctype="multipart/form-data">
    {{ form.csrf_token }}
    {{nav.top.render()}}
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for message in messages %}
                {% if "Error" not in repr(message[1]): %}
                    <div class="alert alert-success">
                        <strong>Success! </strong> {{ message[1] }}
                    </div>
                {% else %}
                    <div class="alert alert-danger">
                        {{ message[1] }}
                    </div>
                {% endif %}
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="sidenav">
        <div class="pretty p-default p-curve">
                <input type="radio" name="color" checked />
                <div class="state p-primary-o">
                    <label>ISP</label>
                </div>
            </div>

        <div class="pretty p-default p-curve">
            <input type="radio" name="color" />
            <div class="state p-success-o">
                <label>MPISP</label>
            </div>
        </div>  

        <div class="mpacks">
            <ul>
                <li>---------------------</li>
                <li>Current:</li>
                <li><a href="">Link 1</a></li>
                <li>---------------------</li>
                <li>Previous:</li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 5</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 6</a></li> 
                <li><a href="">Link 7</a></li> 
            </ul>
        </div>

    </div>

    <div class="main">
            <h3>Dropdown Menu inside a Navigation Bar</h3>
            <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
        </div>




</form>
{% endblock %}

Answer 1

此问题是由您的.sidenav的CSS引起的。

将.sidenav{top:1;}更新为.sidenav{top:0;}。

即：

.sidenav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(54, 54, 54);
    overflow-x: hidden;
    padding-top: 20px;
  }

希望这会有所帮助，

Answer 2

我修复了它。我必须将导航栏的上边距更改为0。

如何从页面上删除顶部的白色图层？

2 个答案: