phone 显示时如何将 3 个元素堆叠在一起-

Question

我正在尝试设置样式 - 时事通讯 - 输入 - 提交，这样当你在你的 phone 中看到网络时，这三个元素会一个一个地显示在另一个下面 - 并且所有框的大小相同并对齐. 有人对此有简单的解决方案吗？非常感谢您的帮助。问候和感谢！ 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

如果你想改变手机视图的设计元素，你应该使用媒体查询。在片段媒体查询中，视口的 max-width 设置为 480 像素。您可以根据需要更改此值。当您缩小浏览器 window 缩小到小于 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;
    }


    }

phone 显示时如何将 3 个元素堆叠在一起-

How to stack 3 elements under each other when phone display-

css

display

responsive