This commit is contained in:
Kane 2022-11-14 10:23:26 +08:00
parent cdda49370f
commit d249fdd576
2 changed files with 23 additions and 11 deletions

View File

@ -2,7 +2,7 @@
* @Author: Kane
* @Date: 2022-11-12 23:32:20
* @LastEditors: Kane
* @LastEditTime: 2022-11-13 00:30:43
* @LastEditTime: 2022-11-14 07:42:30
* @FilePath: \car_dealer\css\app.css
* @Description:
*
@ -35,7 +35,8 @@ body {
padding: 15px;
display: grid;
grid-template-columns: 4rem auto;
grid-template-rows: repeat(3, 1.5rem);
/* grid-template-rows: repeat(3, 1.5rem); */
grid-auto-rows: 1.5rem;
grid-gap: 0.5rem;
}
@ -46,14 +47,15 @@ body {
.grid-left {
display: inline-block;
grid-column: 1/2;
place-self: end;
/* place-self: end; */
text-align: right;
place-items: right center;
}
.grid-right {
display: inline-block;
grid-column: 2/3;
place-self: start;
place-items: left center;
}
.grid-firstname {
@ -67,3 +69,11 @@ body {
.grid-sex {
grid-row: 3/4;
}
/* .grid-left p {
text-align: right;
} */
.grid-right div {
text-align: center;
}

View File

@ -2,7 +2,7 @@
* @Author: Kane
* @Date: 2022-11-12 23:21:53
* @LastEditors: Kane
* @LastEditTime: 2022-11-13 00:29:50
* @LastEditTime: 2022-11-14 07:33:52
* @FilePath: \car_dealer\vue\表单.html
* @Description:
*
@ -25,24 +25,26 @@
<body>
<div class="content">
<div id="app">
<div class="gird-left grid-firstname">
<div class="grid-left grid-firstname">
<p>姓:</p>
</div>
<div class="gird-right grid-firstname"><input type="text" placeholder=""></div>
<div class="gird-left grid-lasttname">
<div class="grid-right grid-firstname"><input type="text" placeholder=""></div>
<div class="grid-left grid-lasttname">
<p>名:</p>
</div>
<div class="gird-right grid-lasttname"><input type="text"></div>
<div class="grid-right grid-lasttname"><input type="text"></div>
<div class="gird-left gird-sex">
<div class="grid-left grid-sex">
<p>性别:</p>
</div>
<div class="gird-right gird-sex"><input type="radio" name="sex" id="male" value="male"><label
<div class="grid-right grid-sex"><input type="radio" name="sex" id="male" value="male"><label
for="male">男</label>
<input type="radio" name="sex" id="female" value="female"><label for="female"></label>
</div>
</div>
</div>
</body>
<script src="../js/vue/vue.global.js"></script>
<script></script>
</html>