时间戳

首页 > 解决方案 > 网格系统 - 当我添加相同大小的内部输入时，行和列之间的间隙不起作用

html - 网格系统 - 当我添加相同大小的内部输入时，行和列之间的间隙不起作用

问题描述

网格系统 - 当我添加相同大小的内部输入时，行和列之间的间隙不起作用。

当我创建网格系统并在它们之间添加一些间隙并在内部添加输入时

height: 100%;
width: 100%;

它需要整个尺寸而没有间隙尺寸它应该更小并且不要从间隙中占用额外的尺寸

.formOuter > .form {
  padding: 12px 25% 10px 25%;
  display: grid;
  grid-template-areas: "grid-1 grid-2" "grid-3 grid-3" "grid-4 grid-4";
  grid-gap: 6px;
}

.formOuter > .form > .grid-1,
.formOuter > .form > .grid-2,
.formOuter > .form > .grid-3 {
  position: relative;
  height: 40px;
}

.formOuter > .form > label > input {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.formOuter>.form>.grid-1 {
  grid-area: grid-1;
}

.formOuter>.form>.grid-2 {
  grid-area: grid-2;
}

.formOuter>.form>.grid-3 {
  grid-area: grid-3;
}

.formOuter>.form>.grid-4 {
  grid-area: grid-4;
}
      <div class="formOuter">

        <div class="form">

          <label class="grid-1">
            <input type="text">
          </label>

          <label class="grid-2">
            <input type="text">
          </label>

          <label class="grid-3">
            <input type="text">
          </label>

          <input type="submit" class="grid-4">

        </div>

      </div>

标签： htmlcsscss-grid

解决方案

问题是默认input规则 - padding: 1px 2px;. 就在这儿：

input[type="text" i] {
    padding: 1px 2px;
}

我通过将值设置为 0 来覆盖此规则 -padding: 0;而且，为了包括 的宽度和高度的边距和边框的值input，我添加了box-sizing: border-box;.

结果，用两行 css 规则解决了这个问题（对于 selector .formOuter > .form > label > input）：

padding: 0;
box-sizing: border-box;


.formOuter > .form {
  padding: 12px 25% 10px 25%;
  display: grid;
  grid-template-areas: "grid-1 grid-2" "grid-3 grid-3" "grid-4 grid-4";
  grid-gap: 6px;
}

.formOuter > .form > .grid-1,
.formOuter > .form > .grid-2,
.formOuter > .form > .grid-3 {
  position: relative;
  height: 40px;
}

.formOuter > .form > label > input {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  
  padding: 0;
  box-sizing: border-box;
}

.formOuter>.form>.grid-1 {
  grid-area: grid-1;
}

.formOuter>.form>.grid-2 {
  grid-area: grid-2;
}

.formOuter>.form>.grid-3 {
  grid-area: grid-3;
}

.formOuter>.form>.grid-4 {
  grid-area: grid-4;
}
<div class="formOuter">

        <div class="form">

          <label class="grid-1">
            <input type="text">
          </label>

          <label class="grid-2">
            <input type="text">
          </label>

          <label class="grid-3">
            <input type="text">
          </label>

          <input type="submit" class="grid-4">

        </div>

</div>

推荐阅读