<el-form-item> <el-button round color="#115e59" type="primary" class="justify-center w-[250px] space-x-2" @click="onSubmit"> 登 录 </el-button> <el-button round color="#115e59" class="w-[250px]" style="margin-left: 0" @click="onSubmit">注 册</el-button> </el-form-item>怎么让这个代码中的两个按钮之间有一个上下的间距
时间: 2024-01-17 18:02:51 浏览: 24
你可以在 `<el-button>` 标签的前面或后面添加一个空的 `<div>` 标签,然后为其设置一个 `style` 属性,指定 `margin` 或 `padding` 的值来实现上下间隔的效果。例如:
```
<el-form-item>
<div style="margin-bottom: 10px;"></div>
<el-button round color="#115e59" type="primary" class="justify-center w-[250px] space-x-2" @click="onSubmit">登录</el-button>
<div style="margin-top: 10px;"></div>
<el-button round color="#115e59" class="w-[250px]" style="margin-left: 0" @click="onSubmit">注册</el-button>
</el-form-item>
```
上述代码中,在第一个按钮前添加了一个 `margin-bottom` 为 10px 的空 `<div>`,在第二个按钮后添加了一个 `margin-top` 为 10px 的空 `<div>`,这样就实现了两个按钮之间的上下间隔效果。你可以根据自己的需要调整 `margin` 或 `padding` 的值。
相关问题
<el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> </el-row>如何让这五个卡片大小统一展示在一条线上
你可以尝试在每个 `<el-col>` 元素中添加 `align="center"` 属性,同时在最外层的 `<el-row>` 元素中添加 `justify="center"` 属性,代码如下:
```
<el-row justify="center">
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
</el-row>
```
这样设置后,每个卡片的宽度会被限定在 `<el-col>` 元素的宽度内,同时 `<el-row>` 元素的 `justify` 属性可以让所有的元素在水平方向上居中对齐。
<div class="bottom"> <el-row> <el-button type="primary" round>主要按钮</el-button> </el-row> </div> 把这个按钮放在宽度方向的中间
要将按钮放在宽度方向的中间,你可以使用flex布局来实现。在父元素的样式中添加`display: flex; justify-content: center;`。以下是一个示例代码:
```html
<div class="bottom" style="display: flex; justify-content: center;">
<el-row>
<el-button type="primary" round>主要按钮</el-button>
</el-row>
</div>
```
在上述示例中,我直接在`<div>`标签上内联样式来设置`display: flex; justify-content: center;`,这会使元素水平居中。你也可以将这些样式添加到CSS样式表中,然后通过添加类名的方式应用到父元素上。