How to set span full width inside button ? css-CodePudding

I am using bootstrap and custom CSS for buttons but.

 <button type="button"
        class="dropdown-item"  >  
        <span (click)="showI('test_data)"  
        class="text-capitalize">
        {{ selectedAction(singleBook.href) }} 
       </span>
     </button>

What is the problem? The button is 200px width. And the span is only 50px width and the rest of the button is not clickable ... I want my span button to take up the entire width of the button to full of width...

no work example : width: 100%; or max-width: 100% ...

CodePudding user response：

Span by default is not a block element, you need to set it manually via CSS, span by default is an inline element.

span.text-capitalize {
  display: block;
  width: 100%;
}

CodePudding user response：

Answer of @GhostPengy doesn't work because button has padding in it. If we remove the padding:

.dropdown-item {
    padding: 0px;
}
.text-capitalize {
    display: inline-block;
    width: 100%;
}

<button type="button" class="dropdown-item"  >  
    <span (click)="showI('test_data)"  class="text-capitalize">
        {{ selectedAction(singleBook.href) }} 
    </span>
</button>

It works like you want it to.