【问题标题】: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 将使&lt;a&gt; 内联。因此,要使 &lt;a&gt; 像您想要的那样,您可以按如下方式替换您的 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 设置样式。导航、字体大小、边距、内边距、显示块或内联等。

      【讨论】:

      • 这个“答案”更值得评论。它无助于“解决”问题。
      • 问题是一样的。
      猜你喜欢
      • 2016-08-28
      • 2011-08-26
      • 1970-01-01
      • 2011-02-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-06-17
      • 1970-01-01
      相关资源
      最近更新 更多