Javascript 将文本固定在<；部门>；，计算后防止移动

问题：我在td标签中有两个div，其中的文本在移动位置，但不应该移动

分区代码：

    <tr>
        <td id="mehlSumme">
            <div id="mehlSumme2">Noch zu berechnen</div>
            <div id="mehl">Mehl</div>
        </td>
    </tr>

但这并没有让我走得更远

---

谢谢你的帮助

您的问题可能是

文本对齐：继承
位。对于#mehlSumme2和#mehl，这将使它们具有来自父对象（td）的文本对齐

您还可以在需要右对齐的元素上右填充
。对于需要左对齐的元素，
padding left
padding:left
在元素的左侧添加空格，因此它有效地将内容推到右侧边界。（与
padding:right
相同）如果您切换它们，至少可以使其看起来像您想要的那样

另一种尝试是为相应的元素添加
文本对齐
：left
或
：right
。尽管如此，
文本对齐
自flex box以来并未得到广泛应用。和
也没有被广泛使用

编辑：我将
inline block
添加到后面有2个的所有ID中的display属性中。它似乎不会使更换部分收缩。另外，您发布的代码对jQ不起作用。您只是忘记了正确关闭函数。
如果div具有display:inline，并且您将其中的文本缩短，则div会收缩。这就是问题所在吗？如果是这样，你知道宽度应该是多少吗？我的意思是，我看不到有人试图在代码中保持宽度不变。td的宽度是400px，不会收缩。我没有指定div的宽度，我认为不需要它。我只需要在我从“Noch zu berechnen”更新到实际所需的mehl数量后，将“mehl”文本保持在原来的位置。文本对齐：left和：right在文本从“Noch zu berechnen”更新到实际的receipe数量后切换文本。我需要它在我更新后修复。你有一个片段或小提琴，你可以发布一个方法来更新文本，这样我就可以明白你的意思？
       #mehlSumme2, #zuckerSumme2, #butterSumme2, #quarkSumme2, #fuellungButterSumme2, #fuellungZuckerSumme2, #eierSumme2, #bananenSumme2, #apfelSumme2 {
        text-align: inherit;
        font-size: 70%;
        display: inline;
        padding-right: 10px;
    }

    #mehl, #zucker, #butter, #quark, #fuellungButter, #fuellungZucker, #fuellungEier, #bananen, #apfel {
        text-align: inherit;
        font-size: 70%;
        display: inline;
        padding-left: 10px;
    }