<div nz-row nzJustify="center"> <div nz-col nzSpan="24"> <h1>{{ title }}</h1> </div> </div>点击按钮以后变成input
时间: 2023-11-16 20:23:18 浏览: 36
<div nz-row nzJustify="center">
<div nz-col nzSpan="24">
<ng-container *ngIf="!showInput">
<h1>{{ title }}</h1>
<button nz-button nzType="primary" (click)="showInput = true">点击按钮</button>
</ng-container>
<ng-container *ngIf="showInput">
<input type="text" [(ngModel)]="title" nz-input>
</ng-container>
</div>
</div>
相关问题
怎么写能让这五个等分,<el-row :gutter="25"> <el-col :span="5"><div class="grid-content bg-purple"></div></el-col> <el-col :span="5"><div class="grid-content bg-purple"></div></el-col> <el-col :span="5"><div class="grid-content bg-purple"></div></el-col> <el-col :span="5"><div class="grid-content bg-purple"></div></el-col> <el-col :span="5"><div class="grid-content bg-purple"></div></el-col> </el-row>
您可以将 `<el-row>` 的 `span` 属性设置为 24,然后将每个 `<el-col>` 的 `span` 属性设置为 5,这样每个 `<el-col>` 就是等分的了。
代码示例:
```html
<el-row :gutter="25" :span="24">
<el-col :span="5"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="5"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="5"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="5"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="5"><div class="grid-content bg-purple"></div></el-col>
</el-row>
```
这样就可以实现五个等分了。
<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` 属性可以让所有的元素在水平方向上居中对齐。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<template> <el-row class="header"> <el-col :span="24"> 后台管理系统 注销 </el-col> </el-row> <el-row class="content"> <el-col :span="6" class="sidebar"> <el-menu :default-active="activeMenu" class="menu"> <el-menu-item index="1"> 首页 </el-menu-item> <el-menu-item index="/category"> 分类管理 <router-link to="/category"> <el-menu-item>分类管理</el-menu-item> </router-link> </el-menu-item> <el-menu-item index="3"> 系统设置 </el-menu-item> </el-menu> </el-col> <el-col :span="18" class="main"> <router-view ></router-view> </el-col> </el-row> <el-row class="footer"> <el-col :span="24"> 版权所有 © 2022 后台管理系统 </el-col> </el-row> </template>还是会跳到新页面
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
删除这个代码中的Javascripts语句让它只用HTML和css实现。 商品 关于Cake's Dream 食品经营许可证 联系我们 购物车页面
<script src="assets/javascripts/jquery.js"></script> <script src="assets/javascripts/fancybox/jquery.fancybox.pack.js"></script> <script src="assets/javascripts/slick.js"></script> <script src="assets/javascripts/wow/wow.js"></script> <script src="assets/javascripts/custom.js"></script> <script src="assets/javascripts/bootstrap.js"></script> <script src="assets/javascripts/classie.js"></script> <script src="assets/javascripts/pathLoader.js"></script> <script src="assets/javascripts/main.js"></script> <script type="text/javascript"> new WOW().init(); </script> <style> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
請你幫我打修改HTML代碼<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常记录</title> <style> .main { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } </style> </head> <body> 首页 登记数据 查询数据 异常记录登记 <form method="post" action="/submit"> <label>确认线别:</label> <input type="text" name="line">
<label>确认日期:</label> <input type="date" name="date">
<label>异常机种:</label> <input type="text" name="model">
<label>异常现象:</label> <textarea name="issue"></textarea>
<label>生产日期:</label> <input type="date" name="prod_date">
<label>生产班别:</label> <input type="text" name="shift">
<label>生产线别:</label> <input type="text" name="prod_line">
<label>责任人:</label> <input type="text" name="responsible">
<input type="submit" value="提交"> </form> 欢迎访问 </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)