HTML要素が表示されない

何らかの理由でmy divユーザー名が表示されません。私はウェブサイトを作成しようとしていますが、私は何が間違っているのかわかりません。私のコードに何か問題がなければ、それはネットビーンズですか？ありがとうございました！HTML要素が表示されない

<meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <style> 
      #header{ 
      z-index: -1; 
     position: fixed; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 10%; 
     background-color: #002EE4; 
     border-radius: 3px; 


     } 
     #logo{ 
      width: 80px; 
      height: 75px; 
      z-index: 1; 
     } 
      #loginpic{ 
      position: absolute; 
      left: 700px; 
      top: 105px; 
      width: 215px; 
      height: 215px; 


     } 
     #name{ 
      position: relative; 
      margin-left: 640px; 
      margin-top: 250px; 
      font-size: 18px; 
     } 
     #nm-input{ 
      font-size: 18px; 
      position: relative; 
      margin-left: 700px; 
      margin-bottom: 500px; 
      bottom: 25px; 
      background-color: rgb(220,220,220); 
     } 
     #surname{ 
      z-index: 1; 
      position: relative; 
      margin-left: 640px; 
      margin-top: 250px; 
      font-size: 18px; 

     } 
     #username{ 


     } 

    </style> 
</head> 
<body> 

     <div id="header"></div> 
     <img id="logo" src="BrainNetwork.png"/> 
     <img id="loginpic" src="BrainNetwork.png"/> 
    <form> 
     <div id="name">Name:</div> 
     <input id="nm-input" type="text" name="Name"/> 
     <div>Username</div> 


    </form> 

</body>

出典

2017-03-05 Technology Exposed

それはあなたの '＃1 NM-input'は、あなたの閲覧ウィンドウの外にユーザ名のdivをプッシュしていることだろうか？あなたは 'margin-bottom：500px;'を設定します。 – Marvin

Username

'は表示されますが、 '＃nm-input'には' margin-bottom：500px'を使用しているため、ページの一番下にあります – Mattonit

は、今ではアウトそれをチェック働いて＃ヘッダー{ Zインデックス：-1; 位置：固定; トップ：0; 左：0; 幅：100％; 身長：10％; 背景色：＃002EE4; border-radius：3px;

} 
    #logo{ 
     width: 80px; 
     height: 75px; 
     z-index: 1; 
    } 
     #loginpic{ 
     position: absolute; 
     left: 700px; 
     top: 105px; 
     width: 215px; 
     height: 215px; 


    } 
    #name{ 
     position: relative; 
     margin-left: 640px; 
     margin-top: 250px; 
     font-size: 18px; 
    } 
    #nm-input{ 
     font-size: 18px; 
     position: relative; 
     margin-left: 700px; 
     margin-bottom: 500px; 
     bottom: 25px; 
     background-color: rgb(220,220,220); 
    } 
    #surname{ 
     z-index: 1; 
     position: relative; 
     margin-left: 640px; 
     margin-top: 250px; 
     font-size: 18px; 

    } 
    #username { 
     min-width: 50%; 
     min-height: 50%; 
     background: red; 
     z-index: 10; 
    } 

</style>

<div id="header"></div> 
    <img id="logo" src="BrainNetwork.png"/> 
    <img id="loginpic" src="BrainNetwork.png"/> 
<form> 
    <div id="name">Name:</div> 
    <input id="nm-input" type="text" name="Name"/> 
    <div id="username">Username</div> 


</form>

出典

2017-03-05 10:34:12

あなたは#nm-inputでmargin-bottom: 500px;を持っています。あなたのユーザー名は500px以下です。恐らくあなたのユーザー名は表示されません。

出典

2017-03-05 10:03:04 Guardian

フィールドを表示しています。ブラウザの右上にスクロールしてみてください。また、制約を変更します。あなたのCSSをで置き換えてください。

#name{ 
      position: r; 
      font-size: 18px; 
     } 

#nm-input{ 
      font-size: 18px; 
      position: relative; 
      bottom: 25px; 
      background-color: rgb(220,220,220); 
     }

出典

2017-03-05 10:07:58

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <style> 
 
    #header { 
 
     z-index: -1; 
 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 10%; 
 
     background-color: #002EE4; 
 
     border-radius: 3px; 
 
    } 
 
    
 
    #logo { 
 
     width: 80px; 
 
     height: 75px; 
 
     z-index: 1; 
 
    } 
 
    
 
    #loginpic { 
 
     position: absolute; 
 
     left: 700px; 
 
     top: 105px; 
 
     width: 215px; 
 
     height: 215px; 
 
    } 
 
    
 
    #name { 
 
     position: relative; 
 
     margin-left: 0px; 
 
     margin-top: 20px; 
 
     font-size: 18px; 
 
    } 
 
    
 
    #nm-input { 
 
     font-size: 18px; 
 
     position: relative; 
 
     margin-left: 50px; 
 
     margin-bottom: 50px; 
 
     bottom: 25px; 
 
     background-color: rgb(220, 220, 220); 
 
    } 
 
    
 
    #surname { 
 
     z-index: 1; 
 
     position: relative; 
 
     margin-left: 640px; 
 
     margin-top: 250px; 
 
     font-size: 18px; 
 
    } 
 
    
 
    #username {} 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div id="header"></div> 
 
    <img id="logo" src="BrainNetwork.png" /> 
 
    <img id="loginpic" src="BrainNetwork.png" /> 
 
    <form> 
 
    <div id="name">Name:</div> 
 
    <input id="nm-input" type="text" name="Name" /> 
 
    <div>Username</div> 
 
    </form> 
 

 
</body> 
 

 
</html>

あなたのコードが正常に動作しています。私はちょうど余白のleftとmargin-topプロパティの値を変更しました。私はあなたが何らかの形を埋めたいと思う。そのためにテーブルタグを使いやすくする。

出典

2017-03-05 10:11:45 Keval

答えて

関連する問題