Javascript 元素的衰退正在改变和调整

我制作了一个简单的网站，用户可以在其中键入一个单词，结果是淡入适当的

div

。问题在于，一些新创建并插入DOM的

是位移位或动态调整到左侧的。您可以在此处检查结果：。 如何避免这种不吸引人的效果

下面是负责此效果的代码部分：

.result，
.完整代码列表{
宽度：自动；
空白：nowrap；
保证金：0自动；
文本对齐：居中；
}
.结果p，
.完整代码列表{
字号：1rem；
字母间距：5px；
填充：15px0；
颜色：#05386b；
动画：Fadein1s；
文本对齐：左对齐；
}
@关键帧淡入淡出{
从{opacity:0}
到{opacity:1}
}
函数putinom（）{
让new段落=document.createElement（'p'）；
newparagration.innerHTML=结果[计数器]；
结果IV.追加儿童（新段落）；
计数器
字符匹配（/[\S]/）；
结果=（inputValue.map（字母=>字母表中的字母？字母表[字母]：
信件);；
}

---

alphabet

变量是一个存储字母及其相关代码的对象。

好吧，我发现只有先出现一个短单词，然后出现一个长单词时才会出现这种情况。为什么？因为它创建了一个div，其中最小的单词与该单词的宽度相等。然后是一个较长的单词，宽度增加。所以第一个单词稍微向左移动了一点。当你用另一种方式做的时候：首先是长单词而不是短单词，它不会移动

所以也许设置一个特定的宽度会有帮助，比如10%

---

看看是否有效。

试试这个CSS，CSS可以在样式表中找到。我刚刚添加了

text align:center

.result p {
    font-size: 2rem;
    text-align: center;
}

或

我认为使用CSS Flexbox（详细说明）将使其非常稳定

基本上，您只需将此添加到现有CSS的端：

.result {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    flex-flow: row wrap;
    margin: 0;
}

.result p {
    flex: 1 100%;
    text-align: center;
}

下面是一个示例（图标不起作用）：

const clearButton=document.querySelector（'.menu--clear--button'）；
const searchButton=document.querySelector（'.menu--search--button'）；
const searchValue=document.querySelector（'.menu--value'）；
const resultDiv=document.querySelector（'.result'）；
const fullCodeListTable=document.querySelector（“.table codes”）；
const contentDivs=Array.from（document.querySelectorAll（'.content'）；
const menuButtons=Array.from（document.querySelectorAll（'.button'））；
让输入值；
让结果；
设计数器=0；
让文字插入；
//输入按钮
clearButton.addEventListener（“单击”，clearInput）；
searchButton.addEventListener（'单击'，函数（））{
clearResult（）；
解码（）；
间隔附加（）；
});
searchValue.addEventListener（'keydown'，函数（事件）{
entresearch（event.key）
});
//菜单按钮
菜单按钮。forEach（功能（按钮）{
按钮。addEventListener（'click'，函数（e）{
单击dex=menuButtons.indexOf（e.target）；
clearResult（）；
隐藏显示下一个按钮（如目标）；
clearDivs（）；
显示属性IV（单击索引）；
})
});
函数解码（）{
inputValue=searchValue.value；
inputValue=inputValue.toUpperCase（）.split（“”）.filter（character=>character.match（/[\S]/）；
结果=（inputValue.map（字母=>字母表中的字母？字母表[字母]：字母））；
}
函数putinom（）{
让new段落=document.createElement（'p'）；
newparagration.innerHTML=结果[计数器]；
结果IV.追加儿童（新段落）；
计数器.result, .full-codes-list {
    width: 300px;
    white-space: nowrap;
    margin: 0 auto;
    text-align: center;
}

.result {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    flex-flow: row wrap;
    margin: 0;
}

.result p {
    flex: 1 100%;
    text-align: center;
}