如何在手机显示屏上彼此堆叠3个元素 -

Question

我正在尝试设置样式 - 新闻快递 - 输入 - 提交，以便在手机中看到网页时，三个元素显示其中一个和所有框在相同的大小和对齐。 有没有人有这个简单的解决方案？我非常感谢你的帮助。关心和感谢！ http://vtwg.eu/michael/index.html V

<div id="contact-area"> 
<form method="post" action="contactengine.php"> 
<label for="Name">NEWSLETTER</label> 
<input type="text" name="Name" id="Name" /> 
<input type="submit" name="submit" value="SUBMIT" class="submit-button" /> 
</form> 
</div> 




input { 
padding: 5px; 
width: 120px; 
font-family: arial, sans-serif; 
font-size: 1em; 
margin: 0px 0px 4px 0px; 
border: 3px solid black; 
background: white; 
} 


.submit-button { 
float: center; 
font-size: 1em; 
} 

label { 
font-family: arial; 
text-align: center; 
width: 120px; 
padding: 5.5px; 
background:#57007F; 
border: 3px solid black; 
margin-left: 20px; 
} 

Answer 1

如果您想更改mobie视图设计元素，你应该使用媒体查询。在设置为最大视口宽度等于480像素的片段媒体查询中。您可以根据需要更改此值。当您将浏览器窗口 缩小到小于480像素时，您会看到不同。

input { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    width: 120px; 
 
    font-family: arial, sans-serif; 
 
    font-size: 1em; 
 
    margin: 0px 0px 4px 0px; 
 
    border: 3px solid black; 
 
    background: white; 
 
} 
 
.submit-button { 
 
    font-size: 1em; 
 
    display: inline-block; 
 
} 
 
label { 
 
    font-family: arial; 
 
    text-align: center; 
 
    width: 120px; 
 
    padding: 5.5px; 
 
    background:#57007F; 
 
    border: 3px solid black; 
 
    margin-left: 20px; 
 
    display: inline-block; 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
    input, .submit-button, label { 
 
    display: block; 
 
    width: 120px; 
 
    margin: 5px; 
 
    box-sizing: border-box; 
 
    } 
 
}

<div id="contact-area"> 
 
<form method="post" action="contactengine.php"> 
 
<label for="Name">NEWSLETTER</label> 
 
<input type="text" name="Name" id="Name" /> 
 
<input type="submit" name="submit" value="SUBMIT" class="submit-button" /> 
 
</form> 
 
</div>

Answer 2

在媒体查询写样式对于分辨率。

HTML：

<div id="contact-area"> 
<form method="post" action="contactengine.php"> 
<label for="Name">NEWSLETTER</label> 
<input type="text" name="Name" id="Name" /> 
<input type="submit" name="submit" value="SUBMIT" class="submit-button" /> 
</form> 
</div> 

CSS：

input { 
padding: 5px; 
width: 120px; 
font-family: arial, sans-serif; 
font-size: 1em; 
margin: 0px 0px 4px 0px; 
border: 3px solid black; 
background: white; 
} 


.submit-button { 
float: center; 
font-size: 1em; 
} 

label { 
font-family: arial; 
text-align: center; 
width: 120px; 
padding: 5.5px; 
background:#57007F; 
border: 3px solid black; 
margin-left: 20px; 
} 

@media only screen and (max-width: 767px) { 
    label, 
    #Name, 
    .submit-button 
    { 
     width: 100%; 
     display: block; 
     margin: 5px 0; 
     box-sizing: border-box; 
    } 


    }