I’m creating a game.
I need upgrades-button for that game so this is what I tried:
#upgbtn {
padding: 4px 16px;
background: yellowgreen;
border: 4px solid black;
border-radius: 10px;
}
#upgrade1 {
padding: 9px 10px;
background: yellow;
border: 4px solid black;
border-radius: 10px;
}<div id="upgrade1">
LV <span id="lvs">1</span>
<div>
<button id="upgbtn">Upgrade</button>
</div>
</div>That is way too long. But that one I want is the one when it is a box but not a long rectangle.
I tried using inline elements like <a>, <span> and more. This is the result:
#upgbtn {
padding: 4px 16px;
background: yellowgreen;
border: 4px solid black;
border-radius: 10px;
}
#upgrade1 {
padding: 9px 10px;
background: yellow;
border: 4px solid black;
border-radius: 10px;
}<span id="upgrade1">
LV <span id="lvs">1</span>
<div>
<button id="upgbtn">Upgrade</button>
</div>
</span>And that is the last thing I tried.
>Solution :
There multiple ways to solve it. as @TemaniAfif already stated in the comments upgrade1 { display: inline-block } is one way to solve it.
Another option would be to set the width to min-content: upgrade1 { width: min-content }
#upgbtn {
padding: 4px 16px;
background: yellowgreen;
border: 4px solid black;
border-radius: 10px;
}
#upgrade1 {
padding: 9px 10px;
background: yellow;
border: 4px solid black;
border-radius: 10px;
width: min-content;
}<div id="upgrade1">
LV <span id="lvs">1</span>
<div>
<button id="upgbtn">Upgrade</button>
</div>
</div>