html - 一旦屏幕尺寸改变，就停止在彼此下方显示 html 按钮

Question

我有这个用于显示按钮的 HTML:

<td>
 <button id="inbox_button" class="HeaderButton">&#9993; (<?php echo $messages_num; ?>)</button>
 <!--
 <button id="monthly_cost_calculator_button"  class="HeaderButton">Calculator</button>
 <button id="remote_support_button"  class="HeaderButton" onclick="RemoteSupport();">Remote Support</button>
  -->
 <button id="customer_communication_button"  class="HeaderButton" onclick="AddCustomerCommunication();">Customer Communication</button>
 <button id="price_list_button" class="HeaderButton" onclick="PriceList();">Price List</button>
</td>

但随着屏幕变小，它们开始显示在彼此下方

我怎样才能阻止它，以便它们始终内联显示？

Answer 1

主要有两种方式:

• 旧的(更不用说弃用了)<nobr>标签。只需将您想要的所有内容放在此标签内的一行中即可
• 将所有按钮放入 <div> 中，然后将此 css 属性添加到其中:white-space: nowrap;

你可能应该使用后者