CSS 单击表单按钮时样式消失

Question

我有一个侧面板菜单，它的样式是我想要的，还有一个顶部导航栏。当我按下添加按钮时，表单已提交，但样式在侧面板菜单上消失了。看图片和代码：

这是我希望在边栏中看到的样式。 Working Style

这是我按添加关联 mac 地址后发生的情况。 Not Working Style

pythonflask app 有基础页面请求和关联客户功能运行。（注释掉测试而不是写入数据库） Flask Python App

*{
    margin:0;
    padding:0;
}

ul {
    list-style-type: none;
    width: 15%;
    position: fixed;
    height: 100%;
    line-height: 60px;
    background-color: rgb(180, 175, 175);
}

ul li {
    display: block;
    width: 100%;
}

ul li a {
    display: block;
    text-align: center;
    text-decoration: solid;
    color:black;
    transition: transform 1s ease-in-out
}

ul li a:hover {
    transform: translate(10%, 0);
}

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 5px;
}  


.box {
    float: right;
    width: 85%;
    height: 1600px;
    text-align: center;
    background-color: cadetblue;
    color:black;
}

{% extends "base.html" %}
{% block body %}
{% include "navbar.html" %}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
    <title>Devices</title>
    <link rel="stylesheet" type="text/css" href="../static/css/sidebar.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="/xgs">Home</a>
            <li><a href="/xgs/devices">Devices</a>
            <li><a href="/xgs/search">Search</a>
            <li><a href="/xgs/associate">Associate</a>
        </ul>
    </nav>
    <div class="box">
        <form method='POST'>
            <p class="card-text">Associate Device</p>
            <input type="text" id="mac" name="mac" value=MAC>
            <button type="submit" formaction="/xgs/associate/insertRG">Add</button>
            {{result}}
            <hr>
        </form>
    </div>
</body>
</html>>
{% endblock %}
{% block scripts %}
{% endblock %}

Answer 1

我不熟悉 Flask 或 Python，但从一般网络的角度来看，当您提交表单时，浏览器期望响应是一个 HTML 页面，并且它改为显示该页面。那么，当您 post 时，“/xgs/associate/insertRG” 的响应是什么？ return HTML 页面包含 link 您的风格 sheet 吗？

Answer 2

我找到了我的问题。首先，通过将我的 css 的内容放入 associate.html 的头部，CSS 得以保留。所以它与 link 到我的 css 文件有关。这是我拥有的代码行以及我替换的代码。

旧：

<link rel="stylesheet" type="text/css" href="../static/css/sidebar.css">

新：

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/sidebar.css') }}">

感谢 codegeek

，我在 this thread 中找到了这个

CSS 单击表单按钮时样式消失

CSS Style Disappears on Form Button Click

python

html

css

flask