为什么我的 <h1> 标签在我的 css 中响应不佳答案

【问题标题】：Why is my <h1> tag not responding well in my css为什么我的 <h1> 标签在我的 css 中响应不佳
【发布时间】：2022-12-31 13:23:18
【问题描述】：

基本上这是代码。

CSS

body{
    margin:0;
    padding:0;
    font-family:sans-serif;
    background: url(smoky.jpg) no-repeat;
background-size:cover;
}

.login-box{
  width:280px;
  position:absolute;
  top:50%;
  left:50%;
  transform :translate(-50%,-50%);
  color:white;  
}
 .login-box h1{
  float:left;
  font-size:40px;
  border-bottom: 6px solid;

}

网页格式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Transparent Login Form</title>
    <link rel="stylesheet" href="style2.css">

  </head>
  <body>

    <div class="login-box">
      <h1>Login</h1>

      <div class="textbox">
        <input type="text" placeholder="Username" name="" value="">
      </div>

<div class="textbox">

<input type="password" placeholder="Password" name="" value="">

</div>

<input class="btn" type="button" name="" value="Sign in">

</div>

  


  </body>
</html>

为什么 h1 不接受 css 的任何想法。

我不明白为什么这里使用 float。不就是为了图片和文字对齐吗

链接到我正在学习的视频。https://www.youtube.com/watch?v=ooc6f1w6Mzg&t=54s

【问题讨论】：

为什么你需要把 h1 放在左边？
您的h1 不接受 CSS 是什么意思？

标签： html css

【解决方案1】：

在 css 中对子元素使用 >。

例如。

.login-box > h1{
  float:left;
  font-size:40px;
  border-bottom: 6px solid;
}

【讨论】：

【解决方案2】：

CSS is working , if not work in your browser please reload or restart the server -

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url(smoky.jpg) no-repeat;
  background-size: cover;
}

.login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
h1 {
  float: left;
  font-size: 40px;
  color: red;
  border-bottom: 6px solid;
}

【讨论】：