Question

正如我的标题所说，我不知道为什么CSS会对标签标签以外的所有内容起作用。

这是我的文件寄存器代码：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <center> <b> Registration Page </b> </center> 
  </head>

  <br>

  <body>
    <img src = "website_demo_pic_1.jpg" />
    <ul class = "SiteMap">
      <li> <a href = "index.html" >Home Page</a>
      <br>
      <li><a href = "register.html" >Register</a>
      <br>
      <li><a href = "login.html" >Log In</a>
      <br>
    </ul>

    <form id = "Form1" action = "submit.php" method = "post">
      <p class="whitetext"><label for = "username">Username :</label>
      <input type = "text" name = "Username" id="username"></p>
      <p class="whitetext"><label for = "password">Password  :</label>
      <input type = "password" name = "Password" id="password"></p>

    </form>
  </body>
</html>

以下是我的登录代码：

<!DOCTYPE html>
<html>

  <head> 
    <link rel="stylesheet" type="text/css" href="style.css" />
    <center> <b> Log In  Page </b> </center> 
  </head>

  <br>

  <body>
    <img src = "website_demo_pic_1.jpg" />
    <ul class = "SiteMap">
      <li> <a href = "index.html" >Home Page</a>
      <br>
      <li><a href = "register.html" >Register</a>
      <br>
      <li><a href = "login.html" >Log In</a>
      <br>
    </ul>

    <form id = "Form2" action = "submit.php" method = "post">
      <label for = "username2">Username :</label>
      <input type = "text" name = "Username" id="username2">
      <br>
      <label for = "password2">Password  :</label>
      <input type = "password" name = "Password" id="password2">
      <br>

    </form> 

  </body>
</html>

这是我的CSS文件：

  img
  {
    width: 100%;
  }

  body
  {
    background-color: black;
  }

  label
  {
    width: 4em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block
  }

  p.whitetext
  {
    color: white;
  } 

  ul.SiteMap
  {
    float: left;
  }

据我所知，代码是正确的，文本框不会排列，这意味着标签上出现了一些奇怪的东西。

Answer 1

以下是您的代码的jsFiddle，略有修改：http://jsfiddle.net/MzsWH/

我唯一看到的关于LABEL属性的是标签的宽度太小。标签内的文字比宽度长，导致它包裹，并使一切看起来很奇怪。

我所做的只是将宽度从4em改为6em。

其次，您的HTML存在一些问题。 HEAD标签中有一个CENTER标签，你的意思是TITLE吗？此外，列表元素（LI）标记之间还有换行符BR标记。我建议Shaquin在评论中说，通过W3C验证器运行您的页面，以便您可以帮助更新HTML。

我希望有所帮助！

干杯！

CSS不适用于标签

1 个答案: