-
- qq_Movework_0 2023-03-07
<template>
<div id="div0">
<form>
<div id="form">
<div>
<label>姓名:</label>
<input type="text">
</div>
<div>
<label>请输入密码:</label>
<input type="text">
</div>
<div>
<label>请再次输入密码:</label>
<input type="text">
</div>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
#form div {
display: flex;
/* margin-top: 50px; */
/* height: 30px; */
align-items: flex-start;
flex: 0 0 30px;
}
#form div label {
flex: 0 0 140px;
text-align: left;
}
#form {
display: flex;
flex-direction: column;
}
</style>
- 0赞 · 0采集
-
- 人心思动 2021-03-30
# form div label{ flex:0 0 100px; text-align:right; }-
截图0赞 · 0采集
-
- 一只小马甲甲 2021-03-12
这里的flex的第三个值 由于父元素的flex-direction 设置为 column 所以30px是在竖直方向上的"宽度"
-
截图0赞 · 0采集
-
- 一只小马甲甲 2021-03-12
通过设置align-items: flex-start 来设置 垂直方向 的对齐
-
截图0赞 · 0采集
