我正在嘗試在我的帖子元素的右下角添加一個簡單的鏈接：
不幸的是，它的整個底部都是可點擊的，這不是我想要的。我只希望文本“鏈接”可點擊。
代碼如下：
<div class="single-post shadow-sm">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<p class="poster">PosterName</p>
<span class="mx-1">|</span>
<p class="category">Category1</p>
<span class="mx-1">|</span>
<p class="date_time">(date)</p>
</div>
<p class="dynamic-text">small_dynamic_text</p>
</div>
<p class="post-details">
<span class="post-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam error corporis, eaque harum commodi at officiis velit aspernatur sapiente voluptatem praesentium inventore, in autem suscipit adipisci quis. Ut aliquam laboriosam qui quos harum excepturi, ex officiis illum laudantium minus deleniti odio fugiat delectus corporis magnam rerum eligendi! Minus, exercitationem voluptas?</span>
<span class="toggle-details">
<span class="show-more"> show more</span>
<span class="show-less"> show less</span>
</span>
<a href="#" class="link-text">Link</a>
</p>
</div>
這個 HTML 已經存在，我只是想<a>用link-text我在下面創建的類插入元素：
main .posts-content .posts .single-post .link-text {
font-size: 12px;
color: #25aa7e;
font-weight: 600;
text-align: right;
display: block;
margin-bottom: -10px;
}
非常感謝幫助，謝謝。
- - 編輯 - -
這display:inline-block; width:auto; 不是我想要的結果，因為現在鏈接不是右對齊的。
uj5u.com熱心網友回復：
您的 CSS 設定為：
display:block;
默認情況下填充水平空間。嘗試inline或inline-block取決于您想要的效果。
display:inline-block;
width:auto; /* keep the width constricted to the element content */
uj5u.com熱心網友回復：
嘗試這樣做：
main .posts-content .posts .single-post .link-text {
font-size: 12px;
color: #25aa7e;
font-weight: 600;
text-align: right;
display: block;
margin-bottom: -10px;
/* lines to add */
width: max-content;
margin-left: auto;
} uj5u.com熱心網友回復：
你的源代碼有點亂，我盡力理解你在問什么。基本上行內專案不回應邊距。Inline-block 將其拉起，而 margin-left: auto 將使其向右對齊。
.link-text {
font-size: 12px;
color: #25aa7e;
font-weight: 600;
text-align: right;
display: inline-block;
margin: -10px 0 0 auto;
}<div class="single-post shadow-sm">
<p class="post-details">
<span class="post-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam error corporis, eaque harum commodi at officiis velit aspernatur sapiente voluptatem praesentium inventore, in autem suscipit adipisci quis. Ut aliquam laboriosam qui quos harum excepturi, ex officiis illum laudantium minus deleniti odio fugiat delectus corporis magnam rerum eligendi! Minus, exercitationem voluptas?</span>
<span class="toggle-details">
<span class="show-more"> show more</span>
<span class="show-less"> show less</span>
</span>
<a href="#" class="link-text">Link</a>
</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/358363.html