Menu
I want three buttons to each take up 33% of the assigned space. They are grouped in a class "numbers".
When I define the width for the button tags, that works fine, but when I do it for all buttons in the class that they belong to, nothing happens.
html:
<html>
<link rel="stylesheet" href="opmaak.css">
<body>
<section class="numbers">
<button type="button" value=1> 1</button>
<button type="button" value=2> 2</button>
<button type="button" value=3> 3</button><br>
</section>
</body>
</html>
css when I do it on button level:
button {
width: 33%;
}
css when I try it for all buttons of that class:
button.numbers {
width:33%;
}
Could anyone point out why that is?
button.numbers {
width: 33%;
}<html>
<link rel="stylesheet" href="opmaak.css">
<body>
<section class="numbers">
<button type="button" value=1> 1</button>
<button type="button" value=2> 2</button>
<button type="button" value=3> 3</button><br>
</section>
</body>
</html>
726
HTML, CSS and JavaScript To set the button width, use the CSS width property.
To increase the height and width of a button, use padding, and then overwrite default value buttons like border and background if you wish by overwriteing the appropriate border values as well as the applicable background values.In addition, to make buttons responsive, you can add a percentage to the width value.
height = '200px'; myButton. style. width= '200px'; I believe with this method, you are not directly writing CSS (inline or external), but using JavaScript to programmatically alter CSS Declarations.
This is just an issue with the CSS selector:
button.numbers {
width:33%;
}
Should be:
.numbers > button {
width:33%;
}
Each button is a direct child of the .numbers class.
The original selector button.numbers would only select button elements that had a class of numbers (i.e. <button class="numbers" ...>).
165
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
