为什么我的边框会覆盖我的表单？

当我让浏览器窗口变小时，边框不会留在窗体周围，它会重叠？我的句子也会如此。如何让边框保持在表格的边缘并使边框高度根据填充表格的长度进行调整？为什么我的边框会覆盖我的表单？

#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>

来源

2015-06-13 Tyberius

媒体查询断点为什么包装元素#form_border？你为什么不在表单上设置边框？ – BillyNate

因为这是指定高度时发生的情况，并且内容变得比这更大......？ – CBroe

我没有设置自己的形式边框，因为我想要填充表单的东西，我告诉另一个div将是最好的方式来做到这一点。 – Tyberius

尝试使用此代码：

<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>

您会发现：

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

范围为改进：

重构：HTML，使其变得更易于管理。

更有效地使用媒体查询。

更有效地使用width值。

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

这里有一些比较常用的，你可以考虑在你的CSS

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
/* Styles */ 
} 
/********** 
iPad 3 
**********/ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

/* iPhone 5 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6 ----------- */ 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6+ ----------- */ 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S3 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S4 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

/* Samsung Galaxy S5 ----------- */ 
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
}

来源

2015-06-13 18:49:10

你的答案很好，但它只意味着有一个最小宽度。这很有帮助，但并未解决高度问题。我附上截图。你可以看到边框是如何覆盖表格的。 docs.google。com/drawings/d/... – Tyberius

您可以随时从我的回答以及包含媒体查询的方式中获得提示。您将很容易管理高度参数。 :) –

你总是可以随意包含尽可能多的媒体查询，只要你想。 :)请再次检查我的答案。我已经包含了更多的**突破点**，这可能对您有所帮助。 –

为什么我的边框会覆盖我的表单？

回答

相关问题