Question

当我使浏览器窗口变小时，边框不会停留在表单周围，它会重叠吗？我的判决也是如此。如何使边框保持在窗体周围，并使用填充来调整窗体长度的边框高度？

#form_border{
    margin: auto;
    width: 400px; 
    
    border-style: solid;
    border-color: black;
    border-width: 1px;
  
    
    
}
#form {
      
    width: 50%;
    height: 50%;
    margin: auto;
    padding-top: 2em;
    text-align: center;
                    
}
#form form{display: block;}
#existing_account{ text-align: center;
                   text-decoration: none;
                   color: black;
}
    


input[type=submit] {
                    background:white;
                    border:1px solid;
                    border-color: #292929;
                    cursor:pointer;
                    border-radius: 5px; }   


input[type=submit] {
                    background:white;
                    border:1px solid;
                    border-color: #292929;
                    cursor:pointer;
                    border-radius: 5px; }

<div id="form_border">
    <form id="form" method="post" action="">
        <p>Username:<br> <input type="text" name="user_name" /> <br></p>
        <p>Password:<br> <input type="password" name="user_pass"><br></p>
        <p>Password again:<br> <input type="password" name="user_pass_check"><br></p>
        <p>E-mail:<br> <input type="email" name="user_email"><br></p>
        <input type="submit" value="Sign Up" />
     </form>
        <a id="existing_account" href="sign_in.php">Already have an account?</a>
    </div>

Answer 1

尝试使用此代码：

string += #yourstuff

您将观察：

我已经介绍了媒体查询来管理宽度小于400像素的屏幕的表单大小。
在媒体查询中已经处理了表单和表单元素的宽度。

改进范围：

重新构建HTML，使其更易于管理。
更有效地使用媒体查询。
更有效地使用print(string)值。

您使用此jsfiddle.net演示链接。

以下是一些您可能会考虑在CSS中使用的更常用的MEDIA QUERY BREAK POIN

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#form_border{
    margin: auto;
    width: 400px; 
    border-style: solid;
    border-color: black;
    border-width: 1px;
}
#form {
    width: 50%;
    height: 50%;
    margin: auto;
    padding-top: 2em;
    text-align: center;
}
#form form{
    display: block;
}
#existing_account{ 
    text-align: center;
    text-decoration: none;
    color: black;
}
input[type=submit] {
    background:white;
    border:1px solid;
    border-color: #292929;
    cursor:pointer;
    border-radius: 5px; 
}   
@media screen and (max-width:399px){
    input[type="text"],
    input[type="password"],
    input[type="email"]{
        width:90%;
    }
    #form_border{
        width:98%;
    }
    #form {
        width: 50%;
        height: 50%;
    }
}
</style>
</head>
<body>
<div id="form_border">
    <form id="form" method="post" action="">
        <p>Username:<br> <input type="text" name="user_name" /> <br></p>
        <p>Password:<br> <input type="password" name="user_pass"><br></p>
        <p>Password again:<br> <input type="password" name="user_pass_check"><br></p>
        <p>E-mail:<br> <input type="email" name="user_email"><br></p>
        <input type="submit" value="Sign Up" />
     </form>
        <a id="existing_account" href="sign_in.php">Already have an account?</a>
    </div>
</body>
</html>

为什么我的边界超过我的表格？

1 个答案: