使Span标签覆盖整个按钮宽度

Question

我有以下结构:

<div class="top">
  <button class="wrap">
    <span class="text">Hello</span>
  </button>
 </div>

我有以下CSS:

.top{
  background-color:yellow;
  width: 216px;
  height: 70px;
}

.wrap, .text{
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

我看过几篇关于"跨越他们父母的整个宽度"的帖子,最受欢迎的答案就是成功 display: block;

但在这种情况下,它不起作用.如果检查,您将看到跨度为200px宽度而不是216px宽度(按钮宽度).

我该如何解决这个问题？这是小提琴

Answer 1

您的 .wrap 类中有填充。在 .wrap、.text 声明中将 padding 设置为 0。

.top {
  background-color:yellow;
  width: 216px;
  height: 70px;
}

.wrap, .text {
  padding: 0px;  //set padding to 0px
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}