创建响应式表单？答案

【问题标题】：Create a form responsive?创建响应式表单？
【发布时间】：2016-09-29 04:11:19
【问题描述】：

我创建了一个表单

想知道如何使用 flexbox 使其具有响应性。

我是 flexbox 的新手，所以我仍在努力。

这是我的 HTML：

    <div class="form">

    <form action="#">
            <div>
                    <p class="title">BORGE</p>

                    <p>
                            <label for="email">E-mail : </label>
                            <input type="email" id="email">
                    </p>

                    <p>
                            <input type="submit" value="Register" class="btn">
                    </p>
            </div>

    </form>


</div>

知道如何将 flexbox 合并到它上面吗？

如果你也可以给我看一下 JSFIDDLE。

【问题讨论】：

你试过的 CSS 在哪里？也许发布您想要的布局图像？

标签： jquery html flexbox

【解决方案1】：

该代码中有很多杂音。下次您提交问题时，请尝试澄清一下。

您没有指定您希望 2 个表单彼此相邻，所以我只使用了您示例中的一个。

body{
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
}

.form{
  border: 1px solid #555555;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

.title{
  font-size: 25px;
}

.btn {
  position: relative;
  vertical-align: top;
  height: 40px;
  width: 25%;
  padding: 0;
  font-size: 15px;
  color: white;
  text-align: center;
  background: #4d4d4d;
  border: 0;
  border-bottom: 2px solid #d0d0d0;
  cursor: pointer;
    margin-left: auto;
}

input:not([type="submit"]){
  flex: 1;
  padding: 10px 20px;
  box-sizing: border-box;
}

p {
  display: flex;
}

label {
    width: 7em;
    margin-right: .5em;
}

@media (max-width: 600px) {
  p {
    display: block;
  }
  input {
    width: 100%;
  }
  
  input[type="submit"] {
    width: 100%;
  }
}

<div class="form">

<form action="#">
		<div>
				<p class="title">BORGE</p>
				<p>
						<label for="first name">User Name : </label>
						<input type="text" id="first_name" autofocus>
				</p>
				<p>
						<label for="last name"> Last name : </label>
						<input type="text" id="last_name">
				</p>
				<p>
						<label for="email">E-mail : </label>
						<input type="email" id="email">
				</p>

				<p>
						<input type="submit" value="Register" class="btn">
				</p>
		</div>

</form>
  
</div>

【讨论】：