如何使这个 <span> 总是相同的宽度，不管里面是什么？

Question

好吧，我已经动态生成了 html，我将 1-6 个缩放的 svgs 分配为 a 的子级。跨度与其他 2 个跨度内联，如下所示：

我希望所有这些“框”都具有相同的宽度，因为它们存在于网格中，但是由于 svg 的数量不同（有时没有，有时是 6 个），尺寸不同。

我试图做的是将 svg 父宽度定义为 100px 无论如何，但这不起作用。我有的：

var html = '<div id = "innerCal">';

html += '<div class = "calCell"><span>[</span><span style = "width 100px; display: inline-block">';

        html += svg; //varies

        html += '</span><span>]</span><h2>'+key+'</h2></div>';

#innerCal {

        position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: -17px; /* Increase/Decrease this value for cross-browser compatibility */

            overflow-y: scroll;

            text-align: center;

    }

.calCell {

    display: inline-block;

    width: 100px;

margin-bottom: -40px;

}

.calCell > span > svg {

display: inline-block;

transform: translate(0px, 30px);

}

.calCell > h2 {

    text-transform: uppercase;

    opacity: 0;

    font-weight: 400;

}

在我设置的 svgs 中可以在这里设置宽度：

svg += `<svg width = "20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 443"><defs><filter x="-50%" y="-50%" width="200%" height="200%" id="Blur${i}"><feGaussianBlur stdDeviation="${gauss}" /></filter><g id="Img${i}"><path class="cls-1" d="M202.76,281.72a67.53,67.53,0,0,0,68.67-42.57,66.32,66.32,0,0,0-21.66-76.4,60.38,60.38,0,0,0-75.51,1.82c-11.79,9.87-17.32,23.53-20.44,38.24-1.69,7.94-3.74,16.27-2.77,24.42a30,30,0,0,0,10.2,18.91c12.69,11.33,32.11,19.47,49.24,18.39,15.38-1,29.86-9.82,35.21-24.65,2.17-6-7.43-8.62-9.58-2.64-3.75,10.42-15,16.68-25.63,17.35-13.55.86-27.15-4.91-38.19-12.38-5.07-3.43-9.73-8-11.11-14.15-1.48-6.69.4-13.84,1.74-20.39,2.6-12.63,6.14-24.55,15.69-33.69a50.21,50.21,0,0,1,61.73-5.74c20.3,12.94,29.65,37.62,23.84,60.86-6.89,27.54-33.4,45.3-61.43,42.68-6.36-.59-6.32,9.35,0,9.94Z"/></g></defs><use style="fill:${color};" filter="url(#Blur${i})" xlink:href="#Img${i}"transform="translate(0,0)"/><use style="fill:${fillColor};" xlink:href="#Img${i}"/></svg>`; 

我该怎么做才能使盒子的宽度始终相同？我当然也可以动态改变 svg 的宽度。现在 svgs 正在堆叠，尽管 display: inline-block

Answer 1

尝试这个：#yourSpanElement {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; width: 50px;}