当前位置: 首页 > Web前端 > CSS

使用css创建等宽并排按钮

时间:2023-03-31 13:20:29 CSS

场景在日常的开发需求中,我们经常会遇到一些场景。并排有两个按钮,例如确认和取消。它们的宽度相同,并且在同一行。一般情况下,我们会选择固定宽度来解决这个问题,只要两个按钮的宽度一样,在外层放一个flex布局容器就可以了,如下:确认

取消
.btns{diaplay:flex;.btn{宽度:100px;}}但是如果考虑到按钮文字的长度不同,如果需要适配多种语言,由于不同的语言,长度可能不一样。如果设置100px,短文案可能按钮太长,唱歌文案可能按钮太短,甚至文案比按钮长。如果增加宽度,会影响短文的显示,最后可能需要针对不同的语言设置不同的宽度方案。考虑不设置宽度的方案,让宽度适应文本的宽度,同时保证两个按钮的宽度一致,可以考虑让父容器的宽度等于子容器的宽度元素,然后两个按钮设置display:block,使其上下分布,宽度等于100%,这样父容器的宽度就会等于最长按钮的宽度,然后由于按钮的100%宽度,另一个较短的按钮的宽度将自动等于较长的按钮。按钮最终定位在右上角,下方的按钮移动到与第一个按钮平行。这里需要注意的是,由于top是用来移动元素的,如果top设置为百分比,则必须为每个button设置一个高度,否则它的top必须写成一个具体的值。具体代码如下:确认
取消//////////////////////////////////////.btns{显示:内联块;位置:相对;宽度:自动;显示:内联块;n:相对的;宽度:自动;高度:100px;行高:100px;.btn{显示:块;宽度:100%;位置:相对;边框:1px纯黑色;文本对齐:居中;填充:010px;}.b2{顶部:-100%;右:计算(-100%-36px);}}