如何使用 CSS 类定位 <a href > 元素？答案

【问题标题】：How to position <a href > element by using CSS class?如何使用 CSS 类定位 <a href > 元素？
【发布时间】：2020-04-20 11:50:38
【问题描述】：

我想在需要的位置放置一个链接。问题是它定位的是左边距而不是顶部边距。我不知道缺少什么。

.LearnMoreTxt{
    margin-top: 15px;
    margin-left: 730px;
    color: rgb(0, 140, 255);
    text-decoration: none;
    font-size: 25px;
    font-family: sans-serif;
}

&lt;a href="#" class="LearnMoreTxt"&gt;Learn More &gt;&lt;/a&gt;

【问题讨论】：

欢迎来到 SO！你试过删除margin-left

标签： html css hyperlink tags

【解决方案1】：

@Sandy 请在您的样式声明中使用 display: block; 制作您的锚 (a) 标记块元素。默认情况下，锚 (a) 标签呈现为内联元素。

.LearnMoreTxt {
    margin-top: 100px; /* change default value */
    margin-left: 100px; /* change default value */
    color: rgb(0, 140, 255);
    text-decoration: none;
    font-size: 25px;
    font-family: sans-serif;
    display: block;
}

&lt;a href="" class="LearnMoreTxt"&gt; Learn More &gt; &lt;/a&gt;

【讨论】：

【解决方案2】：

您必须申请 display: block; 和 white-space: nowrap; 这是因为您的 <a> 文本不会分成两行。

.LearnMoreTxt{
    margin-top: 15px;
    margin-left: 730px;
    color: rgb(0, 140, 255);
    text-decoration: none;
    font-size: 25px;
    font-family: sans-serif;
    display: block;
    white-space: nowrap;
}

&lt;a href="#" class="LearnMoreTxt"&gt;Learn More &gt;&lt;/a&gt;

【讨论】：

我明白了！谢谢解答！