在按钮文本中添加空格时，将导致导航栏创建新行
导航条码，所有的CSS都是手动添加的（使用Bootstrap）
<img src="images/SCP_Logo.jpg" style='width: 100%; max-width:100%;'>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark sticky-top">
<a class="navbar-brand" >SCP Foundation</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
导致问题的按钮
<button type="button" onclick="TextToSpeech() " class="btn navButton" style="margin-left: 1%;"> TextToSpeech </button>
<button type="button" onclick="TextToSpeech() " class="btn navButton" style="margin-left: 1%;"> Pause </button>
<button type="button" onclick="TextToSpeech() " class="btn navButton" style="margin-left: 1%;"> Stop </button>
</ul>
</div>
</nav>
您的代码并不容易理解，但是我尝试在下面为您创建了一个代码片段，并对您的代码进行了一些清理。
这就是你想要做的吗？
null
<img src="images/SCP_Logo.jpg" style='width: 100%; max-width:100%;'>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark sticky-top">
<a class="navbar-brand" >SCP Foundation</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">Your problem button</span>
</button>
<button type="button" onclick="TextToSpeech() " class="btn navButton" style="margin-left: 1%;"> Pause </button>
<button type="button" onclick="TextToSpeech() " class="btn navButton" style="margin-left: 1%;"> Stop </button>
</nav>
将“问题”按钮替换为
null
<button type="button" onclick="TextToSpeech() " class="btn navButton" style="margin-left: 1%; width: 200px;">The Problem Button</button>
好吧，我发现了我的问题，所以发生的事情是，当我在按钮内写了一个边距-左，以移动按钮彼此，但删除边距-左，这就解决了它
问题是左边的空白处迫使这个词移到下一行。
<button type="button" onclick="TextToSpeech() " class="btn navButton" > TextToSpeech </button>
