时间戳

首页 > 解决方案 > HTML/CSS 渐变链接框不调整大小

html - HTML/CSS 渐变链接框不调整大小

问题描述

我有一个链接，我希望它看起来像一个带有渐变背景的按钮。这在文本很短时效果很好，但是当文本较长并且屏幕变小时，文本会换行并且看起来很糟糕。周围的“按钮”框看起来像是在末端被切断了，包裹的部分粘在下面，所以它不再是一个带有弯曲角的单个矩形。相反，我想要调整大小并保持矩形的背景“按钮”框。

.links {
  text-align: center;
}

.links-button {
  border-top: 1px solid #96d1f8;
  background: linear-gradient(rgb(81, 195, 247), #0a99db);
  padding: 1rem 2rem;
  border-radius: 1.5rem;
  box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  color: #000000;
  font-size: 2rem;
  text-decoration: none;
  vertical-align: middle;
}
<div class="links">
  <a class="links-button" href="/example_link">This is a very long link so will wrap when the screen is made smaller</a>
</div>

标签： htmlcsshyperlink

解决方案

代替链接上的默认内联样式，使用内联块：

.links {
  text-align: center;
}

.links-button {
  border-top: 1px solid #96d1f8;
  background: linear-gradient(rgb(81, 195, 247), #0a99db);
  padding: 1rem 2rem;
  border-radius: 1.5rem;
  box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  color: #000000;
  font-size: 2rem;
  text-decoration: none;
  vertical-align: middle;
  display:inline-block;
}
<div class="links">
  <a class="links-button" href="/example_link">This is a very long link so will wrap when the screen is made smaller</a>
</div>

推荐阅读