如何使跨度元素完全覆盖按钮

Question

我的按钮id="有问题；按钮1"；。我必须点击span元素id＝"；播放按钮"；以启动功能。问题在于跨度元素的大小。作为内联元素，跨度小于按钮。因此，并不是每次单击都会启动底层函数。

有人知道如何解决这个问题吗？我试图将跨度更改为div，并更改高度和宽度，但它仍然比按钮小。

非常感谢。

#button {
width: 100%;
color: white;
font-size: 20px;
font-weight: 500;
background-color: green;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 8px;
padding: 14px 40px;
}
#playButton {
display: block;
background-color: blue;
}
#pauseButton {
display: none;
background-color: blue;
}

<button type="button" id="button_1">
<span id="playButton">Open</span>
<span id="pauseButton">Close</span>
</button>

Answer 1

按钮标记有一个HTML本身的默认值＝padding:1px 6px所以你需要制作

#button {
overflow: hidden;
padding: 0;
border: none;
}

对于跨度的一些空间

padding: 3px

Answer 2

您问了什么

1. 使跨度为inline-block，使其具有大小
2. 将填充从按钮移动到跨度

#button {
width: 100%;
color: white;
font-size: 20px;
font-weight: 500;
background-color: green;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 8px;
}
#button span {
background-color: blue;
display: inline-block;
padding: 14px 40px;
}
span#playButton {
display: block;
}
span#pauseButton {
display: none;
}

<button type="button" id="button">
<span id="playButton">Open</span>
<span id="pauseButton">Close</span>
</button>

我会怎么做

1. 禁用跨度上的指针事件(实际上甚至没有必要(
2. 将单击处理程序应用于按钮本身，使用类或数据属性来跟踪状态

#button {
width: 100%;
color: white;
font-size: 20px;
font-weight: 500;
background-color: green;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 8px;
padding: 14px 40px;
}
#button span {
pointer-events: none;
}
span#playButton {
display: block;
}
span#pauseButton {
display: none;
}

<button type="button" id="button">
<span id="playButton">Open</span>
<span id="pauseButton">Close</span>
</button>