間距在頭

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>