javascript - 向符号添加类使符号出现在下一行

Question

每当我向这个符号添加一个类 (▼) 时，该符号就会跳到下一行: https://imgur.com/a/C0pboHJ

代码，它是一个带有文本“JS Array”的下拉按钮，旁边是我想要的符号。

<a href="#content-array-intro" class="nav-link dropdown-btn">JS Array 
<div class="test">&#x25BC;</div></a>

没有类它看起来像这样: https://imgur.com/a/VvTnnpC

代码，现在没有类。

<a href="#content-array-intro" class="nav-link dropdown-btn">JS Array 
&#x25BC;</a>

CSS:

.nav-link {
    text-decoration: none;
    color: white;
    font-size: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 5px 0px 5px 15px;
    white-space: nowrap;
}

.dropdown-btn {
    text-decoration: none;
    color: white;
    font-size: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 5px 0px 5px 15px;
}

我希望它看起来像这样: https://imgur.com/a/hQ3g3cs 我希望该符号位于末尾，而且我知道如果我可以向该符号添加一个类，我就可以做到。

如果您有关于如何在不添加类的情况下解决该问题的解决方案，那就更好了。

Answer 1

问题不在于类，而在于 div。默认情况下，div 元素是 block 显示的，这意味着它们不会与文本保持内联。要获得所需的行为，请改用内联元素(例如 span)，或将类设置为具有 display: inline 以强制 div 像内联元素而不是 block 元素一样工作.