我的HTML按钮内的文字位于按钮外

编程问答 2022-06-10

问题描述

我在HTML网页上有一个“下载”按钮，并且已经为其设置了一些属性。

每当刷新页面时，按钮都会像这样显示，很少出现：

按钮外的文字

但是，它看起来像这样，这是外观正常的按钮：

普通按钮

.navbar-download-btn {
  position: absolute;
  right: 4%;
  top: 5.7%;
  color: white;
  background-color: blue;
  border: 2.2px solid white;
  padding: 0.8%;
  border-radius: 3.5px;
  outline: none;
  cursor: pointer;
  font-weight: bolder;
  font-family: Noto Sans KR,sans-serif;
  letter-spacing: 0.7px;
  transition: 0.7s;
}
<a href="#Download"><button class="navbar-download-btn nonindex">Download</button></a>

解决方法

我认为下载按钮的填充可能存在问题，请从右侧增加填充并尝试在其他浏览器中运行此代码，这对我来说已经太早了，但有时可能只是您的问题浏览器...

, 
text-align: center;
margin-right:
buttonbuttonbuttonhtmlhtmlbuttonpadding