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视图的设计元素，则应使用媒体查询。在片段媒体查询中设置为视口的最大宽度等于480px。您可以根据需要更改此值。缩小浏览器窗口时低至480px，你会看到差异。

＆＃13;

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

＆＃13;

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

＆＃13;

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


    }

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

2 个答案: