Menu
I have five buttons. I want them to take up the available width of their parent div, each being equally sized:
<div style="width: 100%; background-color: red;">
<button type="button" style="width: 20%;">A</button>
<button type="button" style="width: 20%;">B</button>
<button type="button" style="width: 20%;">C</button>
<button type="button" style="width: 20%;">D</button>
<button type="button" style="width: 20%;">E</button>
</div>
Is there a way I can do this without having the manually figure out that they each require 20% width? I want to remove a button at runtime, and that means I have to go and update each remaining button again to width=25%.
I am just checking if there's a more automated way of doing it.
587
Fixing the width for buttons will give a coherent aspect to the interface. Yet, it has the risk of not being able to handle further buttons with perhaps longer labels. This reason makes it incompatible with a fixed guideline. You can always emphasise one particular button by playing on size, colour and padding.
display: block and width: 100% is the correct way to go full width but you need to remove the left/right margin on the button as it pushes it outside the containing element. for more information on the box-sizing property, read the MDN docs.
From the Format menu, choose Make Same Size. From the cascading menu, choose one of the following: Height, to make all selected controls the same height as the dominant control. Width, to make all selected controls the same width as the dominant control. Both, to make all selected controls the same height and width as the dominant control.
Is there a way of forcing the buttons to all be the same size, regardless of the text label? yep. Basically, if you want them the same size, you have to give the same width. First, in your html put the items in a list, and put the list inside a division (for this example I’ll call the div “navigation”)
Height, to make all selected controls the same height as the dominant control. Width, to make all selected controls the same width as the dominant control. Both, to make all selected controls the same height and width as the dominant control. Have questions or feedback about Office VBA or this documentation?
get the width of the div, put into a variable. divide the width by the number of buttons and put that answer into a variable. run a function that creates a button at that width by however many times required.
The simplest way, and the most robust way, is to use a table:
<style>
.buttons {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background-color: red;
}
.buttons button {
width: 100%;
}
</style>
<table class=buttons>
<tr>
<td><button type="button">A</button>
<td><button type="button">B</button>
<td><button type="button">C</button>
<td><button type="button">D</button>
<td><button type="button">E</button>
</table>
(This won’t improve your reputation among colleagues these days if they see your code, though it actually solves the problem probably better than any alternative. So you might consider doing the next best thing: use div markup and display: table etc. Fails on old browsers that don’t support such CSS features.)
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
