英文:
My button moves when I click it. How do I fix that?
问题
暂停/播放按钮在我点击时会移动。如何修复这个问题？
<!-- 开始片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
const btn = document.querySelector(".button");
if (btn === null) {
throw new Error('无法找到按钮');
}
btn.addEventListener("click", function() {
btn.classList.toggle("paused");
return false;
});
<!-- 语言: lang-css -->
:root {
--pauseButtonhight: 16px;
--pauseButtonwidth: 13px;
--pauseButtonborder: 8px;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
padding: 0;
height: var(--pauseButtonhight);
border-color: transparent transparent transparent #7083d8;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: var(--pauseButtonborder) 0 var(--pauseButtonborder) var(--pauseButtonwidth);
}
.button.paused {
padding-top: 8px;
border-style: double;
border-width: 0px 0 0px var(--pauseButtonwidth);
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
<!-- 语言: lang-html -->
<div>
<label for="playspersecond">每秒更新次数：</label>
<input type="number" id="playspersecond" value="5" min="0" max="10" />
<button class="button" id="play"></button>
</div>
<!-- 结束片段 -->
当你按下按钮时，按钮会上下移动，并且还会移动旁边的文本。我认为这与我在不同状态下绘制按钮有关，但我对CSS/HTML还不太了解，不知道该怎么办。这是这个暂停按钮的编辑版本。
如果你有更好/正确的暂停/播放按钮实现方法，那也可以。
英文:
The pause/play button moves when I click it. How do I fix that?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const btn = document.querySelector(".button");
if (btn === null) {
throw new Error('could not find button');
}
btn.addEventListener("click", function() {
btn.classList.toggle("paused");
return false;
});
<!-- language: lang-css -->
:root {
--pauseButtonhight: 16px;
--pauseButtonwidth: 13px;
--pauseButtonborder: 8px;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
padding: 0;
height: var(--pauseButtonhight);
border-color: transparent transparent transparent #7083d8;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: var(--pauseButtonborder) 0 var(--pauseButtonborder) var(--pauseButtonwidth);
}
.button.paused {
padding-top: 8px;
border-style: double;
border-width: 0px 0 0px var(--pauseButtonwidth);
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
<!-- language: lang-html -->
<div>
<label for="playspersecond">Updates per second: </label>
<input type="number" id="playspersecond" value="5" min="0" max="10" />
<button class="button" id="play"></button>
</div>
<!-- end snippet -->
The button moves up and down when you press it, and moves the text next to it as well.
I think this has something to do with how I am drawing the button in the different states, but I am new to CSS/HTML so I don't know what to do.
This is an edited version of this pause button
If you have a better/correct way of doing a pause/play button, that would work as well.
答案1
得分: 1
将按钮的垂直对齐方式设置为middle（或top）：
.vertical-align: middle;
英文:
Set the vertical alignment of the button to middle (or top):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const btn = document.querySelector(".button");
if (btn === null) {
throw new Error('could not find button');
}
btn.addEventListener("click", function() {
btn.classList.toggle("paused");
return false;
});
<!-- language: lang-css -->
:root {
--pauseButtonhight: 16px;
--pauseButtonwidth: 13px;
--pauseButtonborder: 8px;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
padding: 0;
height: var(--pauseButtonhight);
border-color: transparent transparent transparent #7083d8;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: var(--pauseButtonborder) 0 var(--pauseButtonborder) var(--pauseButtonwidth);
vertical-align: middle;
}
.button.paused {
padding-top: 8px;
border-style: double;
border-width: 0px 0 0px var(--pauseButtonwidth);
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
<!-- language: lang-html -->
<div>
<label for="playspersecond">Updates per second: </label>
<input type="number" id="playspersecond" value="5" min="0" max="10" />
<button class="button" id="play"></button>
</div>
<!-- end snippet -->
答案2
得分: 0
将vertical-align: middle;添加到.button类中。
像这样。
.button {
border: 0;
vertical-align: middle;
background: transparent;
/* 其他样式 */
}
英文:
Add vertical-align: middle; to .button class.
Like this.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
const btn = document.querySelector(".button");
if (btn === null) {
throw new Error('could not find button');
}
btn.addEventListener("click", function() {
btn.classList.toggle("paused");
return false;
});
<!-- language: lang-css -->
:root {
--pauseButtonhight: 16px;
--pauseButtonwidth: 13px;
--pauseButtonborder: 8px;
}
.button {
border: 0;
vertical-align: middle;
background: transparent;
box-sizing: border-box;
width: 0;
padding: 0;
height: var(--pauseButtonhight);
border-color: transparent transparent transparent #7083d8;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: var(--pauseButtonborder) 0 var(--pauseButtonborder) var(--pauseButtonwidth);
}
.button.paused {
padding-top: 8px;
border-style: double;
border-width: 0px 0 0px var(--pauseButtonwidth);
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
<!-- language: lang-html -->
<div>
<label for="playspersecond">Updates per second: </label>
<input type="number" id="playspersecond" value="5" min="0" max="10" />
<button class="button" id="play"></button>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论