divs的限制崩潰

我想爲創建一個網站的登錄屏幕創建一個標題。問題在於當用戶調整瀏覽器的寬度時，輸入登錄信息的表單隨着瀏覽器的邊界移動，並且在瀏覽器太小時看起來很奇怪。我試圖設置最小寬度爲600px，以限制標題可以得到的小（這似乎是大多數人給出的答案），但它不起作用。我需要它，這樣，而不是因爲它變小後的瀏覽器的右側，應該得到一個水平滾動條來代替，而保持屏幕的靜態寬度divs的限制崩潰

下面是相應的HTML和CSS代碼：

body { 
 
    background-color: lightblue; 
 
    
 
} 
 

 

 
#header { 
 
    
 
    position: absolute; 
 
    background-color: #B0B1B5; 
 
    height: 80px; 
 
    width: 100%; 
 
    top: 0%; 
 
    left: 0%; 
 
    min-width: 600px; 
 
} 
 

 
#logo { 
 
    
 
    float: left; 
 
    margin-left: 1%; 
 
    padding-top: 1%; 
 
} 
 

 
#button { 
 
    
 
    float: right; 
 
    display: block; 
 
    width: 173px; 
 
    height: 30px; 
 
    margin: 0px auto; 
 

 
} 
 

 
#login { 
 
    
 
    display: table-cell; 
 

 
    position: fixed; 
 
    right: 20px; 
 
    top: 5px; 
 
    
 
}

<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
     <link type="text/css" rel="stylesheet" href="loginstylesheet.css"/> 
 
     <title>Kindred</title> 
 
    </head> 
 
    <body> 
 
     <div id ="header"> 
 
      <a href="http://localhost/Kindred/register.php"><img id="logo" src="images/logo.gif" alt="Kindred - Login" /></a> 
 
      <div id ="login"> 
 
       <form name="loginForm" method="POST" action="logininfo.php"> 
 
        <label>Username:</label><input type="TEXT" name ="userName" value=""/><br> 
 
        <label>Password:</label><input type="PASSWORD" name ="loginPassword" value=""/> 
 
        <br> 
 
        <div id="btnHolder"> 
 
         <input type="SUBMIT" id="button" name="loginButton" value="  Log In  "/> 
 
        </div> 
 
       </form> 
 
      </div> 
 
     </div> 
 
     </body> 
 
</html>

謝謝！

來源

2014-10-31 yitzih

您是否嘗試設置樣式溢出-X：滾動？ – Zack 2014-10-31 03:49:00

你#header格停留在600px的一個最小寬度。這不是問題。問題是您的#login表單有position: fixed，這意味着它的位置獨立於其包含的元素（標題）。我相信你想要的是#login表單停留在標題的右邊緣，並在標題停止收縮時停止（瀏覽器寬度爲600px）。的#login的CSS更改爲

#login { 
    display: table-cell; 
    float: right; 
    /* and add some margins and what-not here */ 
}

這裏有一個JSFiddle

來源

2014-10-31 03:57:16 bowheart

這工作！萬分感謝！ – yitzih 2014-10-31 04:02:12

試着改變你的身體的CSS來此...

body { 
    background-color: lightblue; 
    overflow-x:scroll; 
}

來源

2014-10-31 03:53:51 Zack

當我超過最小寬度但添加了滾動條，但登錄窗體不保持位置並一直與瀏覽器一起崩潰 – yitzih 2014-10-31 03:55:23

divs的限制崩潰

回答

相關問題