使用css创建等宽并排按钮
时间:2023-03-31 13:20:29
CSS
场景在日常的开发需求中,我们经常会遇到一些场景。并排有两个按钮,例如确认和取消。它们的宽度相同,并且在同一行。一般情况下,我们会选择固定宽度来解决这个问题,只要两个按钮的宽度一样,在外层放一个flex布局容器就可以了,如下:确认
取消 .btns{diaplay:flex;.btn{宽度:100px;}}但是如果考虑到按钮文字的长度不同,如果需要适配多种语言,由于不同的语言,长度可能不一样。如果设置100px,短文案可能按钮太长,唱歌文案可能按钮太短,甚至文案比按钮长。如果增加宽度,会影响短文的显示,最后可能需要针对不同的语言设置不同的宽度方案。考虑不设置宽度的方案,让宽度适应文本的宽度,同时保证两个按钮的宽度一致,可以考虑让父容器的宽度等于子容器的宽度元素,然后两个按钮设置display:block,使其上下分布,宽度等于100%,这样父容器的宽度就会等于最长按钮的宽度,然后由于按钮的100%宽度,另一个较短的按钮的宽度将自动等于较长的按钮。按钮最终定位在右上角,下方的按钮移动到与第一个按钮平行。这里需要注意的是,由于top是用来移动元素的,如果top设置为百分比,则必须为每个button设置一个高度,否则它的top必须写成一个具体的值。具体代码如下:
确认