CODEWITHSUNDEEP
htmlcss
elektronet
elektronet

Reputation: 108

Buttons not dependent on content, all same size

I have some struggle getting all button same size when there is placed different content inside the button. looking for some tips and trick that can help me understand this better. here is a picture of the situasjon: enter image description here

Here is the css code i have used for the button part:

  .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 is all buttons and .symbox is the border around the buttons

Upvotes: 0

Views: 95

Answers (1)

vahanpwns
vahanpwns

Reputation: 963

You can use flexbox, something like this:

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

Here's a really nice guide on how to use flexbox effectively: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Related Questions