javascript - 更改内容会影响其他元素在行中的放置

Question

我有一组<spans>如下（忽略内联样式）：

<div style="text-align: center;">
            <span id="ears" class="disable-selection" style="display: inline-block;" onclick="increase('earNumber', ears)" oncontextmenu="decrease('earNumber', ears) ">( )</span>
            <span id="mouths" class="disable-selection" style="display: inline-block;" onclick="increase( 'mouthNumber', mouths)" oncontextmenu="decrease('mouthNumber', mouths)">( )</span>
            <span id="eyes" class="disable-selection" style="display: inline-block;" onclick="increase( 'eyeNumber', eyes)" oncontextmenu="decrease('eyeNumber', eyes)">( )</sp>
 </div>

当我使用 javascript 来更改每只耳朵的内容时，但当我这样做时，其他元素会上下移动，如下所示：

右边的文字高于所有其他文字

更改右侧文本后，元素现在全部内联

下面是我的CSS：

div span, button
    cursor: pointer

span
    text-align: center
    font-size: 20px
    width: 120px
    height: 30px
    border: 1px solid black
    display: block

我想让所有元素保持内联，但我不确定如何。

编辑：下面的完整代码

<div style="text-align: center;">
    <button onclick="copy()" id="container" title="Copy">&#128203</button>
    <button onclick="paste()" title="Paste"></button>
    <button onclick="clearInput()" title="Clear">️&lt;/button>
    <button onclick="edit()" title="Edit">✏️</button>
    <button onclick="shuffle()" title="Random"></button>
</div>

div span, button {
    cursor: pointer;
}
span {
    text-align: center;
    font-size: 20px;
    width: 120px;
    height: 30px;
    border: 1px solid black;
    display: block;
}

var ears = ['⸮ ?','ᕮ ᕭ', '| |']
var eyes = ['ᴗ ᴗ', '► ◄', '✪ ✪']
var mouths = ['ᨓ', 'ө', '﹏']
//Change Face in Input
function setFace() {
    faceEars = ears[earNumber].split(" ");
    faceEyes = eyes[eyeNumber].split(" ");
    document.getElementById('faceOutput').value = faceEars[0] + faceEyes[0] + mouths[mouthNumber] + faceEyes[1] + faceEars[1];
    document.getElementById('ears').innerHTML = ears[earNumber];
    document.getElementById('eyes').innerHTML = eyes[eyeNumber];
    document.getElementById('mouths').innerHTML = mouths[mouthNumber];
}
//Increase Part Value
function increase(number, arr) {
    window[number] >= arr.length - 1 ? window[number] = 0 : window[number] += 1;
    setFace();
}
//Decrease Part Value
function decrease(number, arr) {
    window[number] <= 0 ? window[number] = arr.length - 1 : window[number] -= 1;
    setFace();
}

标签： javascripthtmlcss