function clickListener() {
loader.style.display = 'inline-block';
title.style.display = 'none';
}button {
height: 3rem;
padding: 0 1rem;
margin-right: 20px;
}
#loader {
display: none;
width: 12px;
height: 12px;
margin: 15px auto;
position: relative;
}<div class="buttons">
<button>1</button>
<button>2</button>
<button onclick="clickListener()">
<span id="title">Push</span>
<span id="loader"></span>
</button>
</div>浏览器:Chrome
当您点击该按钮时，监听程序clickListener()被调用.一旦被调用，ClickListener就会更改按钮的子级(".title"和".loader")的CSS属性.
This has nothing to do with JavaScript. This is a CSS problem.个
当您更改".loader"的显示类型时，CSS会将位置向右移动，因为当inline类似于block时，按钮会溢出出它的父容器.
您可以通过使用inline-block或仅将textContent设置为""(无)来实现相同的按钮效果.
您的代码中也有一个打字错误，您以</div>结尾<span>.
Update:在你更新你的答案后，你还暗示你在按钮上增加了额外的css，它也有同样的效果.看起来你试图在按钮内使用margin.页边距类似于外填充，它输出元素外部的额外空格.您需要使用padding来代替，或者专门使用类似margin-left之类的东西来定位元素.
以下是使用inline-block而不是inline的示例:
function clickListener() {
loader.style.display = 'inline-block';
title.style.display = 'none';
}button {
height: 3rem;
padding: 0 1rem;
margin-right: 20px;
}
#loader {
display: none;
width: 12px;
height: 12px;
position: relative;
}<div class="buttons">
<button>1</button>
<button>2</button>
<button onclick="clickListener()">
<span id="title">Push</span>
<span id="loader"></span>
</button>
</div>