CODEWITHSUNDEEP
htmlcss
user19964717
user19964717

Reputation:

How can I make button auto width to its parent div

I can't make a button auto its width to the parent div it is a child of. How do I make that?

See the problem in action.

Here is the code (html structure) if you need it:

<div class="drp">
  <button class="drp-btn" id="i-drp-btn">m/s</button>
  <div id="i-speed-drp" class="drp-content">
    <button class="drp-btn-elem" value="m/s">m/s</button>
    <button class="drp-btn-elem" value="km/h">km/h</button>
  </div>
</div>

Upvotes: 0

Views: 2506

Answers (3)

EST-TQ
EST-TQ

Reputation: 34

If you want the button width full width of parent div, you can add width: 100% for button

Upvotes: 0

Juan Francisco Car&#237;as
Juan Francisco Car&#237;as

Reputation: 11

If what you want is to make all buttons of that class use 100% of the width, then you should add that in the CSS code by adding this line:

.drp-btn-elem{width: 100%}

Here's a snipet:

.drp-btn-elem{width: 100%}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="drp">
    <button class="drp-btn" id="i-drp-btn">m/s</button>
    <div id="i-speed-drp" class="drp-content">
        <button class="drp-btn-elem" value="m/s">m/s</button>
        <button class="drp-btn-elem" value="km/h">km/h</button>
    </div>
</div>
</body>
</html>

Upvotes: 0

Max
Max

Reputation: 64

Did you try width: 100% on your button style? It should take the size of the parent, except if you have margin defined on your parent or padding defined on your button.

Upvotes: 0

Related Questions