CSS - 链接覆盖整个页面的宽度答案

【问题标题】：CSS - links cover the width of an entire pageCSS - 链接覆盖整个页面的宽度
【发布时间】：2017-01-08 17:55:30
【问题描述】：

我的 div 中有链接，它们覆盖了整个页面的宽度，而我只希望文本是可点击的。

HTML

<div class="categories">
        <a href="link1">link</a>
        <a href="link2">link</a>
        <a href="link3">link</a>
</div>

CSS

.categories {
margin-top: 5em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
text-align: center;
}

.categories a {
display: block;
text-decoration: none;
color: #fff;
}

.categories a:hover {
text-decoration: underline;
}

【问题讨论】：

标签： html css display

【解决方案1】：

编辑：考虑到您的评论，我建议您从 .categories a 中删除 display:block 并切换到 flexbox。

body {
  background: lightgray;
}
.categories {
  margin-top: 5em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-flow: column wrap;
}
.categories a {
  /* display: block; */
  align-self: center;
  text-decoration: none;
  color: #fff;
}
.categories a:hover {
  text-decoration: underline;
}

<div class="categories">
  <a href="link1">link</a>
  <a href="link2">link</a>
  <a href="link3">link</a>
</div>

【讨论】：

我仍然需要链接在彼此之下，这就是我使用显示块的原因。
在这种情况下使用flexbox，我编辑了上面的例子，它会比display: table;灵活得多。
链接现在在彼此之下，但老问题又回来了，链接又占据了整个页面的宽度。

【解决方案2】：

看到这个fiddle

从

中删除display: block;

.categories a {
/* display: block; */
text-decoration: none;
color: #000;
}

删除display: block 将使<a> 内联。因此，要使 <a> 像您想要的那样，您可以按如下方式替换您的 HTML

<div class="categories">
        <a href="link1">link1</a>
                <br/>
        <a href="link2">link</a>
                <br/>
        <a href="link3">link</a>
                <br/>
</div>

【讨论】：

谢谢，这行得通，但这是正确的做法吗？

【解决方案3】：

如果你想要相同的结构，你可以使用 display:table 和 margin:0 auto;并从类别类中删除文本对齐中心。

.categories {
margin-top: 5em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;


}

.categories a {
display:table;
margin:0 auto;
text-decoration: none;
color: #000;
}

.categories a:hover {
text-decoration: underline;
}

<div class="categories">
    <a href="link1">link</a>
    <a href="link2">link</a>
    <a href="link3">link</a>
</div>

【讨论】：

【解决方案4】：

需要用 CSS 设置样式。导航、字体大小、边距、内边距、显示块或内联等。

【讨论】：

这个“答案”更值得评论。它无助于“解决”问题。
问题是一样的。