Question

我有这个.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

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

Answer 1

可以得到所有帮助，但是进一步的调试显示我没有导入文件style.css，所以我更改了

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

到

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

并且一直在工作，谢谢您的帮助。

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

1 个答案: