CSS 网格未在指定的网格列中显示项目
发布于2023-05-29 21:19 阅读(852) 评论(0) 点赞(2) 收藏(3)
我有一个具有三列布局的嵌入式表单。
虽然使用网格，但我试图让提交按钮位于中间（所以第二列），但不确定为什么我当前的方法不起作用：
#form {
display: grid;
grid-template-areas: 'inputs1 inputs2 textarea' 'inputs1 inputs2 submit';
justify-content: center;
grid-auto-columns: 25%;
}<form id="form">
<div class="responsiveRow">
<span> Text 1:</span>
<input type="text" />
</div>
<div class="responsiveRow">
<span> Text 2:</span>
<input type="text" />
</div>
<div class="responsiveRow">
<span> Textarea:</span>
<textarea cols="10" rows="10"> </textarea>
</div>
<div class="responsiveRow">
<span> Text 3:</span>
<input type="text" />
</div>
<div class="responsiveRow">
<span> Text 4:</span>
<input type="text" />
</div>
<div class="responsiveRow">
<input type="submit">
</div>
</form>我无法更改表单的 HTML，以上是嵌入后表单代码的显示方式。
任何帮助，将不胜感激。
期望的结果：
解决方案
您使用网格区域来决定将项目放置在网格中的位置 -
下面的例子应该是你所需要的。
.responsiveRow:nth-of-type(3) {grid-area: myArea;}
.responsiveRow:nth-of-type(6) {grid-area:centered;}
.responsiveRow{border: 1px solid #000;}
#form{
display: grid;
grid-template-areas: '. . myArea' '. . myArea' '. centered .';
justify-content: center;
grid-auto-columns: 33%;
}
/*remove the grid on mobiles*/
@media all and (max-width:540px){
#form{
display:block;
}
}<form id="form">
<div class="responsiveRow">
<span> Text 1:</span>
<input type="text"/>
</div>
<div class="responsiveRow">
<span> Text 2:</span>
<input type="text"/>
</div>
<div class="responsiveRow">
<span> Textarea:</span>
<textarea cols="10" rows="10"> </textarea>
</div>
<div class="responsiveRow">
<span> Text 3:</span>
<input type="text"/>
</div>
<div class="responsiveRow">
<span> Text 4:</span>
<input type="text"/>
</div>
<div class="responsiveRow">
<input type="submit">
</div>
</form>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/528441/17fdce78682bddc98db2/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力