时间戳

首页 > 解决方案 > 如何在链接之间添加更多空间以便显示整个按钮？

html - 如何在链接之间添加更多空间以便显示整个按钮？

问题描述

我有一个 CSS 问题，我的按钮隐藏了下面的按钮。

在此处输入图像描述

这是单个按钮的外观在此处输入图像描述

目前我将它们包裹在一个段落中

<p><a href="#" class="link">1. Aaahh!!! Real Monsters</a></p>
<p><a href="#" class="link">2. ActRaiser</a></p>
<p><a href="#" class="link">3. Addams Family Values</a></p>

按钮的 CSS：

.link {
    background-color: red;
    box-shadow: 0 5px 0 darkred;
    color: white;
    padding: 0.5em 1.5em;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
  }

  .link:hover {
    background-color: #ce0606;
    cursor: pointer;
  }

  .link:active {
    box-shadow: none;
    top: 5px;
  }

如何显示整个按钮？

标签： htmlcss

解决方案

display: inline-block;为设置样式.link。

.link {
  background-color: red;
  box-shadow: 0 5px 0 darkred;
  color: white;
  padding: 0.5em 1.5em;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
}

.link:hover {
  background-color: #ce0606;
  cursor: pointer;
}

.link:active {
  box-shadow: none;
  top: 5px;
}
<p><a href="#" class="link">1. Aaahh!!! Real Monsters</a></p>
<p><a href="#" class="link">2. ActRaiser</a></p>
<p><a href="#" class="link">3. Addams Family Values</a></p>

推荐阅读