在CSS中将屏幕分为2部分

时间:2019-06-03 19:32:14

标签: javascript css

我尝试显示按钮和复选框,但我不明白为什么我所有的元素都在屏幕的左侧。

显示时,好像我的屏幕被一分为二,右边有空白的div,但是什么也没有。我也没有定义要居左的位置。

您知道如何使用整个空间吗?

buttonLeft。 buttonRight

      
.wrapperUA{
  display: grid;
  grid-template-columns: 40vh 20vh 40vh;
  grid-template-rows: 5vh 10vh 5vh 3vh 15vh 10vh 3vh 5vh 15vh 10vh 19vh;
  grid-gap: 5px;
  grid-template-areas:
  ". . ."
  "UA1Fr . UA1En"
  ". . ."
  "UA21 UA22 UA23"
  ". . ."
  "UA3Fr . UA3En"
  ". . ."
  "UA41 UA42 UA43"
  ". . ."
  ". UA5 ."
  ". . .";
  text-align: center;
  align-items: center;
  vertical-align: middle;  
  align-content: center;
}

.UA1Fr{
  grid-area: UA1Fr;
}

.UA1En{
  grid-area: UA1En;
}

.UA21{
  grid-area: UA21;
}

.UA22{
  grid-area: UA22;
}

.UA23{
  grid-area: UA23;
}

.UA3Fr{
  grid-area: UA3Fr;
}

.UA3En{
  grid-area: UA3En;
}

.UA41{
  grid-area: UA41;
}

.UA42{
  grid-area: UA42;
}

.UA43{
  grid-area: UA43;
}

.UA5{
  grid-area: UA5;
  text-align: center;
}

.UA1Fr, .UA1En, .UA3Fr, .UA3En, .UA5{
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 50px;
    border: 2px solid green;
    color: green;
    background-color: transparent;
    font-weight: bold
}
<div class="wrapperUA" >
          <Button 
                class="UA1Fr"
                variant="primary">
                Text
          </Button>
          <Button 
                class="UA1En"
                variant="primary">
                text
          </Button>
          <h5 class="UA21">text to display</h5>
          <div class="UA22">
            <input type="checkbox"/>
          </div>
          <h5 class="UA23">text</h5>
          <Button 
                class="UA3Fr"
                variant="primary">
                test to display
          </Button>
          <Button 
                class="UA3En"
                variant="primary"
                onClick={}>
                text
          </Button>
            <h5 class="UA41">text</h5>
            <div class="UA42">
              <input type="checkbox"/>
            </div>
            <h5 class="UA43">text</h5>
          <Button 
              class="UA5"
              variant="primary">
              Next
          </Button>
      </div>

0 个答案:

没有答案