CSS

Question

我的 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;
}

Answer 1

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

Answer 2

编辑：考虑到您的评论，我建议您从 .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>

Answer 3

看到这个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>

Answer 4

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

.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>

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

CSS - links cover the width of an entire page

html

display

看到这个fiddle