我正在尝试制作一个名字和姓氏在同一行/列上的表单。我试着将主组放入flex,然后用flex-wrap放入我想要的组,但它似乎没有移动。我是不是漏掉了什么?我尝试了几个不起作用的东西(比如将包装的孩子设置为flex1)。不起作用。
不管怎样,这里是HTML
<form>
<div class="sd-form-group"></div>
<div className="sd-form-wrap">
<div class="form-name form-first-name">
<label>First Name</label>
<br>
<input type="text">
</div>
<div class="form-name form-last-name">
<label>Last Name</label>
<br>
<input type="text">
</div>
</div>
<div class="form-email">
<label>Email</label>
<br>
<input type="text">
</div>
<div class="form-message">
<label>Message</label>
<br>
<textarea placeholder="Enter your comments, questions and feedback here." rows="4"></textarea>
</div>
<div class="form-checkbox">
<input type="checkbox">
<label>
Communications box.
</label>
</div>
<input type="submit" value="Submit">
</div>
</form>
CSS:
.sd-form-group{
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
}
.sd-form-wrap {
flex-wrap: wrap;
}
一个问题出现在第3行
上,如果不使用jsx或类似方法,请尝试使用class
而不是classname
。
还要确保.sd-form-wrap
类具有display:flex;
null
.sd-form-group{
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
}
.sd-form-wrap {
display: flex;
}
<form>
<div class="sd-form-group"></div>
<div class="sd-form-wrap">
<div class="form-name form-first-name">
<label>First Name</label>
<br>
<input type="text">
</div>
<div class="form-name form-last-name">
<label>Last Name</label>
<br>
<input type="text">
</div>
</div>
<div class="form-email">
<label>Email</label>
<br>
<input type="text">
</div>
<div class="form-message">
<label>Message</label>
<br>
<textarea placeholder="Enter your comments, questions and feedback here." rows="4"></textarea>
</div>
<div class="form-checkbox">
<input type="checkbox">
<label>
Communications box.
</label>
</div>
<input type="submit" value="Submit">
</div>
</form>