zoukankan      html  css  js  c++  java
  • [CSS] Using inline-grid to gain easy control over gap and size

    <div class="form-group">
      <label class="form-control radio">
        <span class="form-control__input radio__input">
          <input type="radio" name="radio" />
          <span class="input__control"> </span>
        </span>
        Radio
      </label>
    </div>
    .form-control {
        display: inline-grid;
        grid-template-columns: 1em 1fr;
        grid-gap: 0.5em;
      
        input {
          opacity: 0;
          width: 1em;
          height: 1em;
        }
      
        &__input {
          display: grid;
          grid-template-areas: "input";
          place-content: center;
          font-size: 1em;
      
          > * {
            grid-area: input;
          }
        }
      
        .input__control {
          width: 1em;
          height: 1em;
          border: 0.1em solid var(--color-default, color("default"));
        }
      }
      

    Inside `form-control` are two element:

    1. span element (1em)

    2. Radio text (1fr)

    inline-grid, put those two elements in one row and size. it is also to define 0.5em gap in between.

  • 相关阅读:
    准确率99.9%的离线IP地址定位库
    手写一个消息队列以及延迟消息队列
    rabbitmq介绍
    污点和亲和力高级调度方式
    ceph
    Vue作业
    label和labelSeletor
    http状态简记
    数据库
    作业
  • 原文地址:https://www.cnblogs.com/Answer1215/p/14488618.html
Copyright © 2011-2022 走看看