时间戳

首页 > 解决方案 > 同一页面提供不同的视觉输出

css - 同一页面提供不同的视觉输出

问题描述

我有这个.html文件和那个表格，有时会延伸到所有宽度。通过 Opera、Firefox 和 Edge 测试。

.html 文件： 

<!DOCTYPE html>

<head>
  <title>LOGIN</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="assets/css/style.css">
  <script src="assets/js/index.js"></script>
</head>

<body>
  <div class="w3-container">
    <h1>Login</h1>
    <div class="w3-card-4 form">
      <form class="w3-container" action="/login" method="post">
        <label for="username">Nome de utilizador</label>
        <input class="w3-input" type="text" name="username" placeholder="Nome de utilizador" required id="username">
        <label for="password">Password</label>1
        <input class="w3-input" type="password" name="password" placeholder="Password" required id="username">
        <button class="w3-button" type="submit">Submit</button>
      </form>
    </div>
  </div>
</body>

style.css 文件：

.big {
    background: rgb(150, 150, 150);
    width: 100vw;
    height: 40vw;
    max-height: 400px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightgray {
    background-color:#c5c5c5!important;
}

.bordergray {
    border-color:#6e6e6e!important;
}

.rightalign {
    float: right !important;
}

.form {
    width: 50vw;
    /*margin-left: 2vw;*/
}

body {font-family: "Roboto", sans-serif}
.w3-bar-block .w3-bar-item {
  padding: 16px;
  font-weight: bold;
}

我可以说这是 CSS 错误，但我不知道规则是什么或如何导致这种情况。
此 HTML 是通过编译 .pug 文件生成的，因此我没有漂亮的版本，如果您可以格式化 HTML，请随时编辑此问题。

编辑：
有时我得到 IMG1，其他我得到 IMG2 但只有当我打开一个新标签时，为什么？

IMG1 IMG2：（ 我将背景颜色设置为黑色，因此字段的大小更明显）IMG1 IMG2

标签： css

解决方案

坦克的所有帮助，但进一步调试显示文件 style.css 没有被导入，所以我改变了

<link rel="stylesheet" href="assets/css/style.css">

至

<link rel="stylesheet" href="/assets/css/style.css">

并且一直有效，感谢您的帮助。

推荐阅读