具有绝对位置的按钮不会拉伸到最大宽度

Question

Button element doesn't stretch to full parent width with left/right zero technique. It perfectly works for a tag but not for button . What am I missing?

The question is why left/right approach isn't working for button. I know that I can use wrapper, calc() or flexbox. But it seems strange that old way doesn't work.

Fiddle

 #container { position: relative; width: 400px; height: 60px; padding: 0 20px; background: #ccc; } .button { position: absolute; left: 20px; right: 20px; height: 20px; background: green; color: white; border: 1px solid #000; } a.button { top: 0; } button.button { top: 20px; display: block; } button.button-full { width: 100%; top: 40px; } 

 <div id="container"> <a class="button">Link button</a> <button class="button">Button button</button> <button class="button button-full">Button button</button> </div> 

Answer 1

You can set width:inherit on the button , but be aware that it won't work when box-sizing:border-box is set on the container, otherwise you will probably need width:calc(100% - paddings) , also mentioned in the other answer.

button {
  width: inherit;
}

Answer 2

you can add button width to 100% so that it will be 100% of its parent container.

 .button {
   position: absolute;
   left: 0;
   right: 0;
   **width: 100%;**

   background: green;
   color: white;
   border: 1px solid #000;
}

Answer 3

Add width: calc(); to the .button as in

a.button {
  top: 0;
  width: calc();
}

This will stretch it to 100% and retain your padding of the parent element.

Answer 4

Your button is overflowing the parent since your button is absolute and has left of 20px .

There is no need to compensate for the parent padding.

Change left left: 0px; or remove position: absolute; .

.button{
  position: absolute;
  left: 0px;
  ...
}

I would rather be removing position: absolute ;