程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

CSS 网格未在指定的网格列中显示项目

发布于2023-05-29 21:19     阅读(901)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

2 0
收藏该文
已收藏

评论内容:(最多支持255个字符)