0

私のタイトルが言うように、CSS が label タグ以外のすべてで機能する理由がわかりません。

ファイルレジスタのコードは次のとおりです。

<!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 が彼のコメントで言ったように、HTML の更新を支援できるように、W3C バリデーターを使用してページを実行することをお勧めします。

それが役立つことを願っています！

乾杯！

于 2012-05-30T00:49:50.437 に答える