如何控制steps步长和居中显示

一时失言乱红尘 2023-05-29 06:25 2阅读 0赞

1、问题背景

步骤条在正常情况下，占据宽度为100%；如果外层设置文字内容居中，会导致线和圆圈脱离，不在对应的位置上

![20191105101132487.png][]

2、实现源码

<el-steps :active="active" finish-status="success">
    	<el-step title="第一步"></el-step>
    	<el-step title="第二步"></el-step>
    	<el-step title="第三步"></el-step>
    	<el-step title="第四步"></el-step>
    </el-steps>

3、解决源码

添加属性space和align-center

<el-steps :active="active" :space="300" finish-status="success" align-center>
    	<el-step title="第一步"></el-step>
    	<el-step title="第二步"></el-step>
    	<el-step title="第三步"></el-step>
    	<el-step title="第四步"></el-step>
    </el-steps>

![20191105101427913.png][]

4、知识扩展

如果将水平显示改为垂直显示，需要添加属性direction="vertical"

<el-steps :active="active" :space="300" direction="vertical" finish-status="success" align-center>
    	<el-step title="第一步"></el-step>
    	<el-step title="第二步"></el-step>
    	<el-step title="第三步"></el-step>
    	<el-step title="第四步"></el-step>
    </el-steps>

![20191105110603288.png][] steps

[20191105101132487.png]: https://img-blog.csdnimg.cn/20191105101132487.png
[20191105101427913.png]: https://img-blog.csdnimg.cn/20191105101427913.png
[20191105110603288.png]: https://img-blog.csdnimg.cn/20191105110603288.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 div居中显示(div在页面居中显示)

如何使div中div的内容居中显示 ![Image 1][] 超链接其中是为了让超链接换行 ; padding-top:\\px;是为了垂直居中，具体是多少

冷不防/ 2023年09月26日 11:56/ 0 赞/ 154 阅读

相关如何控制steps步长和居中显示

1、问题背景步骤条在正常情况下，占据宽度为100%；如果外层设置文字内容居中，会导致线和圆圈脱离，不在对应的位置上 ![20191105101132487.p

一时失言乱红尘/ 2023年05月29日 06:25/ 0 赞/ 3 阅读

相关＜text＞标签中的文字如何居中显示

应该放在容器里才有用吧,给容器加样式就行啊。 <view class='testText'> <text>是真的吗?text> <

你的名字/ 2022年12月05日 05:21/ 0 赞/ 216 阅读

相关 java jtextfield 居中_如何使JTextField中输入的文字居中显示

多谢！ | 给你一个小例子，刚写的，呵呵：) import javax.swing.\; import java.awt.event.\; import java.a

Myth丶恋晨/ 2022年11月03日 11:27/ 0 赞/ 290 阅读

相关 android 字体居中显示文字,[Android]Android 布局中如何让图片和文字居中显示？

图片文字居中显示 \\①组件TextView的属性 drawableTop \`\`\` android:layout\_width="match\_parent" a

冷不防/ 2022年10月16日 00:42/ 0 赞/ 59 阅读

相关 Java如何将窗口居中显示

水一期博客 -------------------- 如何将窗口居中显示？ -------------------- 如果你将窗口坐标定为： x：窗口宽度/2

古城微笑少年丶/ 2022年08月31日 12:29/ 0 赞/ 277 阅读

相关如何控制元素显示、隐藏？

http://www.w3school.com.cn/jquery/jquery\_hide\_show.asp ![70][] [70]: /images/2022053

￡神魔★判官ぃ/ 2022年05月30日 05:52/ 0 赞/ 493 阅读

相关如何使网页居中显示

在编写网页时，如果需要使网页内容在浏览器内居中显示，可以利用CSS的margin属性。在body元素下添加一个容器div(id=”container”)，将其他内容均放在该di

墨蓝/ 2022年02月03日 08:21/ 0 赞/ 713 阅读

相关居中显示

1.多个块盒并排水平显示（三个div为例子）第一步：先三个div并给他们设置宽高背景色 <!DOCTYPE html> <html> <

柔情只为你懂/ 2021年12月19日 16:39/ 0 赞/ 401 阅读

相关 MFC应用程序如何让窗口居中显示

以下两种方法可任选其一： ①在应用程序类（CxxxApp）的 InitInstance() 函数中加入： m_pMainWnd->CenterWindow( GetDe...

系统管理员/ 2021年02月13日 16:16/ 0 赞/ 1383 阅读