我正在尝试制作一个名字和姓氏在同一行/列上的表单。我试着将主组放入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>
我正在尝试制作一个名字和姓氏在同一行/列上的表单。我试着将主组放入flex,然后用flex-wrap放入我想要的组,但它似乎没有移动。我是不是漏掉了什么?我尝试了几个不起作用的东西(比如将包装的孩子设置为flex1)。不起作用。 不管怎样,这里是HTML CSS:
Github上的完整项目 我使用FlatList从上到下显示一堆视图,其中每一行都有一个图像,旁边有一些文本。这就是视图的样子,注意较长的标题是如何在末尾剪掉的,并且不要换行到下一行。 这是我的行代码。 我看到的只有一种解决方案(Ashok的解决方案)似乎会影响文本的包装方式。不幸的是,这个解决方案看起来像是将文本推到左边,这样文本就不会填满屏幕。我尝试了很多调整,但似乎没有什么帮助。
我有两个枚举,它们实现了如下相同的接口:- 名为SystemA和SystemB的两个枚举正在实现此接口。 我想要像这样应用getConfigFunction:- 但它会抛出编译时错误,因为形成的流的类型为:Config[]。所以我尝试了以下修改:- 但这也失败了,因为我还需要修改forEach部分。有人能帮忙吗?我该如何修改forEach部分,或者我该如何使用map()/flatmap()函数,这
flex-wrap 主要通过在外层容器中设置它里面的子项目是否可以换行。默认情况下项目是不换行的。 1. 官方定义 flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。 2. 慕课解释 默认情况下,设置了 display:flex 的容器是不会换行的,这时候如果我们希望它换行就可以通过 flex-wrap设置超出宽度换行,也可以设置它如何换行,既换行之后的排
如何将专辑封面对齐到卡片的右侧。我尝试使用属性,但这似乎不起作用。谁能帮忙吗? null null
我的情况是: 所以我尝试通过单击另一个div来切换侧栏。它是一个100%高度的边栏,固定在视区的右侧。本质上,我试图将一个300px的div包装在50px宽的切换div和250px宽的侧边栏div周围,并且我想用一个负的右边距像素值来隐藏侧边栏部分。使用.toggle:active选择器(所以当单击toggle div时会发生这种情况),我想通过将边距右的像素值设置回0px来显示侧栏部分。 到目前