CSS：我希望我的链接看起来像按钮，但它们重叠

Question

为了使我的所有链接看起来像按钮，我已经在我的CSS中完成了这个：

a {
  color: #06A;
  text-decoration: underline;
  margin: 10px 20px;
  padding: 10px 20px;
  /*background-color: #EEE;*/
  border: #BBB solid 1px;
}

它们看起来很好，然而，它们似乎混淆了，就是它们被定位好像没有填充或边缘。

看看这里，如果你仍然没有看到我的观点：http://picasaweb.google.com/lh/photo/1yjC0oyQUbBlo_2D4RqjLZsCgnyUSAKTKup5o2EMfkM?feat=directlink

Answer 1

<a>本质上和定义是一个内联元素，这意味着它不能给出宽度，高度，填充或边距（以及一些其他样式）。

要更改它，只需添加display: block;即可将其转换为块级元素，以启用填充，边距等。

如果您想要保留流程但能够接受这些样式的内容，请使用display: inline-block;。这也适用于其他内联元素，如<span>。

Answer 2

最简单的解决方案是正确设置line-height（不更改display）。

Answer 3

使用“display：block”使填充和边距生效。

Answer 4

尝试使用display: inline-block;设置链接样式。

Answer 5

您可能需要考虑使用float样式：

<a style='float:left' href='#' />

...这将让你做所有有趣的事情，并“帮助”定位你的主播作为奖金。

（如果你想让事情停止浮动，请放clear:both）

Answer 6

@ snowflake的问题级评论让我思考。

可能会让您知道有些人认为使用此类内容的列表比标记普通锚标签更好（毕竟，这是一个列表类型，不是吗？）。

这个代码看起来有点像这样：

HTML：

<ul class="genrelist">
   <li><a href="#fantasy">Fantasy</a></li>
   <li><a href="#childrensliterature">Children's Literature</a></li>
   <li><a href="#speculativefiction">Speculative Fiction</a></li>
   <li><a href="#absurdistfiction">Absurdist Fiction</a></li>
   <li><a href="#fiction">Fiction</a></li>
   <li><a href="#wordicantread">Word I can't read</a></li>
</ul>

CSS：

.genrelist {
  list-style-type: none;
  overflow: hidden;
}

.genrelist li {
  /*background-color: #EEE;*/
  border: #BBB solid 1px;
  display: inline;
  float: left;
  margin: 10px 20px;
  padding: 10px 20px;
}

.genrelist li a {
  color: #06A;
  text-decoration: underline;
}

上面的代码会显示如下（full-size image）：