Html 按钮中的空格会导致按钮在导航栏中生成新行

在按钮文本中添加空格时，会导致导航栏创建新行

导航条形码，所有CSS都是手动添加的（使用引导）

---

您的代码不容易理解，但我尝试在下面为您创建一个代码段，并稍微整理了一下您的代码

这就是你想做的吗

SCP基金会
你的问题按钮
暂停
停止

将问题按钮替换为

---

问题按钮

好的，我解决了我的问题，所以当我在按钮内留下一个边距来移动按钮时发生了什么，但是去掉了左边的边距，这就解决了问题

问题是左边的空白迫使这个词移到下一行

<button type="button" onclick="TextToSpeech() " class="btn navButton" > TextToSpeech </button>

TextToSpeech

        <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>

<button type="button" onclick="TextToSpeech() " class="btn navButton" > TextToSpeech </button>