間隔

Question

私のCSSコードは -

<style> 
     header { 
      background-color:teal; 
      color:white;     
      padding:5px; 
     } 
</style> 

これはjsp-

<header>  
     <h1 style="text-align:center">File Tracking System</h1> 
     <img style="text-align:left" src="images.png" width="200" height="100" alt="NSIC-logo1"/> 
     <a href="department.jsp">Create</a> 
     <form style="float:right;" action=" LogoutServlet" method="post"> 
      <input type="submit" value="Logout" > 
     </form> 
     <br> 
     </header> 

の体内で私のヘッダであるあなたがログアウトボタン下の画像と空間上のスペースを見ることができます。私はこのスペースをイメージしたいとは思っていません。イメージは左側に収まり、センターに向かいますが、このようになっています。これについて

Answer 1

彼らが適切に配置されていなかったとしてhtmlコードを編集した、これを試してみてください。

<header>  
     <img style="text-align:left" src="images.png" width="200" height="100" alt="NSIC-logo1"/> 
       <a href="department.jsp">Create</a> 
         <h1 style="text-align:center">File Tracking System</h1> 

     <form style="float:right;" action=" LogoutServlet" method="post"> 
      <input type="submit" value="Logout" > 
     </form> 
     <br> 
     </header> 

CSS

header { 
    background-color:teal; 
    color:white;     
    padding:5px; 
    width:100%; 
    height:200px; 
    } 
    img{float:left;} 
    a{float:left;} 
    h1{ 
    float:left; 
    margin-left:50px; 
} 

Answer 2

どのように...

あなたは同じコンテナ内の柔軟なアイテムの残りの部分に比べて、項目の長さを指定display: flexプロパティを、使用することができます。

header { 
 
      background-color:teal; 
 
      color:white;     
 
      padding:5px; 
 
      display: flex; 
 
     }

 <header>  
 
     <img style="float:left" src="images.png" width="200" height="100" alt="NSIC-logo1"/> 
 
     <a href="department.jsp">Create</a> 
 
     <h1 style="text-align:center">File Tracking System</h1> 
 
     <form style="float:right;" action=" LogoutServlet" method="post"> 
 
      <input type="submit" value="Logout" > 
 
     </form> 
 
     <br> 
 
     </header>