I currently have a group of elements arranged horizontally using the display:inline-block property.
However, one element is larger in height than the rest and extends beyond its boundaries. How can I adjust this element to match the height of the others while keeping its margins or paddings intact?
I'm unsure about the best approach for this issue, but I believe there are two possible solutions:
Is there a way to reduce the size of the larger element so it aligns with the others?
Can the other elements be resized to match the larger element?
Here's the codepen link for reference: http://codepen.io/anon/pen/domBYj
<ul class="topbar-menu">
<li><a> 1000 points </a></li>
<li><a class="action-button green"> Get Points </a></li>
<li><a> Level 10 </a></li>
<li><a> Buddies </a></li>
</ul>
This represents the menu structure:
.topbar-menu {
display: table;
margin: 1em auto;
}
.topbar-menu > li {
background: #333;
display: inline-block;
position: relative;
}
.topbar-menu a {
color: #eee;
display: block;
padding: 1em 2em;
text-decoration: none;
}
And here is the larger element:
.topbar-menu .action-button {
position: relative;
margin: 0px 10px 5px 0px;
border-radius: 8px;
}
.green {
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}