All buttons are uniform in size and not affected by the content

Question

All buttons are uniform in size and not affected by the content

I'm struggling to make all buttons the same size when they contain different content. I'm looking for tips and tricks to better understand this issue. Here is a visual representation of the situation: https://i.sstatic.net/lsiAJ.png

Below is the CSS code I've used for the button styling:

  .but {
background-color: white;
color: black;
border: 2px solid #C8C8C8;
height: 1.5em;
text-decoration: none;
display: inline-block;
font-size: 1.2em;
cursor: pointer;
margin: -2px;
}

.symbox {
width: 20em;
height: 5.2em;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid black;
margin: 1px 0px;
}

.but refers to all buttons, while .symbox represents the border around the buttons

html css

Answer 1

Answer №1

To implement a layout using flexbox, you can do something similar to the following code:

.container {
  width: 4em;
  
  display:flex;
  flex-wrap:wrap;
}
.but {
  border: 2px solid #ccc;
  padding: 2px;
  text-align: center;
  
  flex-grow: 1;
}

<div class="container">
  <div class="but">a</div>
  <div class="but">b</div>
  <div class="but">c</div>
  <div class="but">de</div>
  <div class="but">f</div>
  <div class="but">ghi</div>
  <div class="but">j</div>
  <div class="but">k</div>
  <div class="but">l</div>
  <div class="but">m</div>  
</div>

For more in-depth information on effectively utilizing flexbox, check out this helpful guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

To implement a layout using flexbox, you can do something similar to the following code:

.container {
  width: 4em;
  
  display:flex;
  flex-wrap:wrap;
}
.but {
  border: 2px solid #ccc;
  padding: 2px;
  text-align: center;
  
  flex-grow: 1;
}

<div class="container">
  <div class="but">a</div>
  <div class="but">b</div>
  <div class="but">c</div>
  <div class="but">de</div>
  <div class="but">f</div>
  <div class="but">ghi</div>
  <div class="but">j</div>
  <div class="but">k</div>
  <div class="but">l</div>
  <div class="but">m</div>  
</div>

For more in-depth information on effectively utilizing flexbox, check out this helpful guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

All buttons are uniform in size and not affected by the content

Answer №1

Similar questions

Issue with bootstrap: the navbar highlight and anchor href are not functioning as intended

Struggling to solve these two CSS Animation issues

Struggling to make the height attribute work in Bootstrap 4 alpha

Exploring the Depths of the Internet: Uncovering Data with BeautifulSoup

A guide to examining the HTTP response body, including HTML content, using Wireshark

What is the number of steps jQuery animates in?

Switch the hue when altered

"Utilizing ng class with an array of objects: A step-by-step guide

Gin and Golang: Implementing HTML files with CSS styling

Is there a way to modify my code to restrict users from liking a post multiple times?

What is the technique to achieve a seamless blur effect?

A layout featuring a grid of 3 rows and 2 columns, each containing 6

Creating input fields using Vuejs

A table featuring an HTML select element that allows users to choose from preset options or manually enter

How to organize the cpuinfo output in BASH

What is the best way to define file paths in a webpage to ensure that the same file works seamlessly on both server and

Error alert: The system could not locate Google when trying to drop pins

After my jQuery functions are executed, my CSS rules are loaded

Transition within Bootstrap navbar is not as smooth as desired

At times, the Kendo UI Tooltip may linger on screen longer than expected, failing to disappear as