0

正如我的标题所说，我不知道为什么 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;
  }

据我所知，代码是正确的，但文本框不会排成一行，这意味着标签发生了一些奇怪的事情。

4

1 回答 1

1

这是您的代码的 jsFiddle，稍作修改：http: //jsfiddle.net/MzsWH/

<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>
    
    <STYLE>
    img{
        width: 100%;
        border:1px solid #333;
        height:40px;
    }
    body{
        background-color: #CCC;
    }
    label {
        /*width: 4em;*/
        width:6em;
        float: left;
        text-align: right;
        margin-right: 0.5em;
        display: block
    }
    p.whitetext{
        color: white;
    } 
    ul.SiteMap{
        float: left;
        border:1px solid #666;
    }
    </STYLE>

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

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

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

我希望这会有所帮助！

干杯!

于 2012-05-30T00:49:50.437 回答