Question

我有CSS网格结构，其中已经有一些表单字段并指定了添加按钮然后单击它，需要添加一组表单字段。

<div class="network-sub-form2">
      <div class="desc-btn">
        <label class="label revert btn-label vertical-alignment">AZ 2<sup class="star">*</sup></label>
        <button class="addButton btn-add-container button-revert vertical-alignment">
          <p class="add-desc">Add</p>
          <div class="add-btn">+</div>
        </button>
      </div>
      <select class="select-input" id="type" name="Type">
        <option>AWS</option>
        <option>option 2</option>
        <option>option3</option>
      </select>
      <div class="vertical-alignment">
         <div class="network-line-style"></div>
      </div>
      <div class="desc-btn">
        <label class="label revert btn-label vertical-alignment">Subnet 1<sup class="star">*</sup></label>
        <button class="addButton btn-add-container button-revert vertical-alignment">
            <p class="add-desc">Add</p>
            <div class="add-btn">+</div>
        </button>
      </div>
      <input type="text" class="form-input">  
      <div class="radio-group">  
        <label class="label"><input type="radio">Public</label>
        <label class="label odd-radio"><input type="radio">Private</label>
      </div>
      <label class="label revert btn-label vertical-alignment">CIDR<sup class="star">*</sup></label>
      <select class="select-input" id="type" name="Type">
        <option>AWS</option>
        <option>option 2</option>
        <option>option3</option>
      </select>    ```

这是我使用过的CSS

.formfields-network{
  display: grid;
  grid-template-columns: repeat(15,1fr);
  grid-auto-rows:1fr;
}

.network-heading{
  grid-column: 3/5;
  grid-row:2/3; 
  display: flex;
  justify-content: flex-start;
  align-items:center;
  text-align: left;
font-size: 20px;
font-weight:600;
letter-spacing: 0;
color: #333333;
opacity: 1;
}

.line-center{
  display: flex;
  align-items: center;
  grid-column:3/14;
  grid-row:3/4;
}
.network-line{
  border: 1px solid #DDDDDD;
  height: 1px;
  background: #666;
  opacity: 0.6;
  width: 100%;
}

.group1{
  grid-row: 4/17;
  grid-column: 3/14;
  display: grid;  
  grid-row-gap: 10px;
}

.input-button{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

.flex{
  flex: 5;

}

.button-container{


  align-items: flex-end;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;

}

.add-button{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: auto;
  border: 1px solid #F08520;
}

.circle{
  color: #F08520;
}

.flex-labels{
  display: flex;
  flex-direction: row;
}

.left-label{
 flex: 1;
 align-self: flex-start
}

.right-label{
 flex: 1;
 align-self: flex-start;
}



.form-input-2{
  height: 45px;
 background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #DDDDDD;
opacity: 1;
border-radius: 4px;
color: #AAAAAA;

}



.left-input{
  flex:1;
  align-self: flex-start;

}

.right-input{
  flex:1;
  align-self: flex-end;

}

.gap{
  width: 30px;
}

.line-center1{
  grid-row:18/19;
  grid-column:3/14;
  display: flex;
  align-items: center;
}

.vpc1{
  grid-row: 19/20;
  grid-column: 3/6;
}

.group2{
  grid-column: 3/14;
  grid-row: 20/32;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr  ;
  grid-auto-rows: 30px;
  background: #F7F7F7 0% 0% no-repeat padding-box;
  border-radius: 3px;
  grid-row-gap:5px;
}

.az1{
  grid-column:2/6;
  grid-row: 2/3;
  align-items: center;
  justify-content: flex-start;

}

.flex1{
  flex:4;
}

.az1-inputselect{
  grid-column: 2/6;
  grid-row: 3/4;
 height:33px;
}
.az1-line{
  grid-row: 4/5;
  grid-column: 2/6;
  opacity:0.6 ;
}
.az1-subnet{
  grid-row: 5/6;
  grid-column: 2/6;
  align-items: center;
  justify-content: flex-start;
}

.subnet-input{
  grid-row:6/7;
  grid-column:2/6;
  height:33px;
}

.radio-button{
  grid-row:7/8;
  grid-column: 2/6;
  display: flex;
  align-items: center;
  justify-content:flex-start;
}

.radio-label{
  letter-spacing: 0;
color: #333333;
opacity: 1;
font-size:14px;
margin-right: 5px;
}

.cidr{
  grid-row:8/9;
  grid-column: 2/6;
}

.cidr-inputselect{
  grid-row:9/10;
  grid-column:2/6; 
}

.line2{
  grid-row: 33/34;
  grid-column: 3/14;
}

.vpc2{
  grid-row:34/35;
  grid-column: 3/6; 
}

.group3{
  grid-column: 3/14;
  grid-row: 35/47;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr  ;
  grid-auto-rows: 30px;
  background: #F7F7F7 0% 0% no-repeat padding-box;
  border-radius: 3px;
  grid-row-gap:5px;
}



.end-gap{
  grid-row:50/52;
  grid-column:1/17; 
  height:45px;
}

.endbtn{
  grid-row:47/50;
  grid-column:11/14;
  display: flex;
  justify-content: center;
  align-items: center;
}

实际上，我在这里面临的问题是我有一个css网格形式，我将所有字段按各自的顺序放置，并假设我说在字段5上有一个添加按钮，单击它应该添加标签和文本输入。我想到的解决此问题的方法是在字段下方添加一个空div，并在onclick事件中向该div中动态添加一些html，但这会导致CSS损坏。关于如何正确使用此权限以及通常如何正确使用css网格的任何建议，以便可以添加动态内容。

在CSS网格结构中单击按钮时动态添加表单字段

0 个答案: