如何在按钮内设置跨度全宽？ css答案

【问题标题】：How to set span full width inside button ? css如何在按钮内设置跨度全宽？ css
【发布时间】：2021-11-26 21:31:56
【问题描述】：

我正在为按钮使用引导程序和自定义 CSS，但是。

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

有什么问题？该按钮的宽度为 200 像素。跨度只有 50px 宽度，按钮的其余部分不可点击... 我希望我的 span 按钮占据按钮的整个宽度，使其充满宽度......

没有工作示例：宽度：100%；或最大宽度：100% ...

【问题讨论】：

为什么不在按钮而不是跨度上添加点击事件？
我在按钮上有另一个点击动作..我需要设置 span 100% 宽度
那么为什么不将 2 次点击操作合并为 1 次操作 :)
您为什么要这样做？因为您可以将点击事件绑定到按钮。

标签： html css

【解决方案1】：

Span默认不是块元素，需要通过CSS手动设置，span默认是内联元素。

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

【讨论】：

这不行：/
您可以添加更多信息吗？因为它适用于给定的测试https://jsfiddle.net/8ksqx3ah/

【解决方案2】：

@GhostPengy 的答案不起作用，因为按钮中有填充。如果我们删除填充：

.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>

一切如你所愿。

【讨论】：