我尝试显示按钮和复选框,但我不明白为什么我所有的元素都在屏幕的左侧。
显示时,好像我的屏幕被一分为二,右边有空白的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>