【问题标题】: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%;
}

【讨论】:

【解决方案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>

一切如你所愿。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-05-20
    • 1970-01-01
    • 1970-01-01
    • 2015-06-24
    • 2015-11-13
    相关资源
    最近更新 更多