时间戳

首页 > 解决方案 > 如果里面的文本很长，CSS按钮会被推出

html - 如果里面的文本很长，CSS按钮会被推出

问题描述

我有一个如下的按钮列表，以及它的 CSS

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  width: 200px;
  height:200px;
  white-space: normal;
  word-wrap: break-word;

}

.table_mgt, .inventory_mgt {
    border-radius: 30px;
}
  <h1>Dashboard</h1>

  <div id="dashboard_menu">
    <button class="button table1">Table 1</button>
    <button class="button table2">Table 2</button>
    <button class="button table_mgt">Table Mgt</button>
    <button class="button table3">Table 3</button>
    <button class="button table4">Table 4</button>
    <button class="button table5">Table 5</button>
    <button class="button inventory_mgt">Inventory</button>
  </div>

按钮中的文本table_mgt太长，与其他按钮相比，它会将该按钮推出行外。无论内部文本的长度如何，如何强制所有按钮位于同一行？

标签： htmlcss

解决方案

添加到id#dashboard_menu{ display:flex;}

推荐阅读