uni-app怎么让俩个标签同处于一个水平线上
时间: 2024-03-05 19:47:46 浏览: 85
如果你想让 Uni-app 中的两个标签处于同一水平线上,可以使用以下方法:
1. 使用 `flex` 布局,在父元素上设置 `display: flex`,并设置子元素的 `align-items` 或 `align-self` 属性为 `center`。
2. 在父元素上使用 `position` 属性,并设置子元素的 `position` 和 `top` 或 `bottom` 属性。
下面是示例代码:
```html
<template>
<view class="container">
<text class="label">{{label1}}</text>
<text class="label">{{label2}}</text>
</view>
</template>
<style>
.container {
display: flex;
align-items: center;
}
.label {
margin-right: 10px;
font-size: 16px;
}
/* 或者使用 position 属性 */
/*
.container {
position: relative;
}
.label {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
*/
</style>
<script>
export default {
data() {
return {
label1: '标签1',
label2: '标签2',
}
},
}
</script>
```
在上面的代码中,我们在父元素上使用了 `display: flex` 属性,并设置了 `align-items: center` 属性,使得子元素处于同一水平线上。你也可以使用 `position` 属性来实现同样的功能,具体的实现方式可以参考代码中的注释。