add to the id #dashboard_menu{ display:flex;}
Solution 1 :
Solution 2 :
Remove padding and just keep the fixed width and height.
If you use padding, the box dimensions will change with the text content.
Problem :
I have a list of buttons as following, and its 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>The text in the table_mgt button is too long and it pushes that button out of row, compared to the rest. How do I force all buttons to be in the same row, regardless of the length of the text inside ?