如何在手機顯示屏上彼此堆疊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; 
    } 


    }