span可改变宽度 不换行

做下笔记
html

<div class="form">
            <span class="country">
                国家/地区
            </span>
            <span class="countrys">
                中国
            </span>
        </div>

css

.form{
        position:relative;
        top:13.44rem;
        left: 1.87rem;
        @include fontStyle(0.95rem,0.95rem);
        color: rgba(51, 51, 51, 1);
        .country{
            width: 4.72rem;
            height: 1.87rem;
            text-align: left;
            display:inline-block; //起作用语句 
        }
        .countrys{
            width: 4.72rem;
            height: 1.87rem;
            text-align: left;
            display:inline-block; 
        }
    }

效果截图

display:inline-block

使元素变成行内块级元素，结合了行内元素和块级元素的特性（不独占一行的块级元素），即

1. 与其他行内元素共享一行

2. 可以修改width、height属性

3. padding、margin四个方向的值设置均有效

解释 摘自 https://blog.csdn.net/qq_33576343/article/details/81744887