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

編輯 ：考慮到您的評論，我建議您從.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 2

看到這個小提琴

刪除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 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> 

Answer 4

需要使用CSS設置樣式。 導航，字體大小，邊距，填充，顯示塊或內聯等