Html 在按钮内添加三角形图标，以便用户知道此按钮具有下拉菜单

我还在学习HTML和CSS，现在我正在玩一个简单的按钮，你可以查看这个按钮的演示

如您所见，三角形图标位于演示中按钮的底部。我想把它放在按钮的右边，让用户知道这个按钮有一个下拉菜单

有没有办法用下面的代码将三角形图标放置在右侧

HTML:

尝试此CSS属性：

display:inline;

---

我试图改变css如下

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;  
    border-top: 5px solid #202020;    
    display: inline-block;
    padding-top:0px;
    margin-left:5px;
  }

并更改html，如下所示

<a class="language-icon" href="#" alt="Choose your language"> 
  <div class="arrow-up"></div>
  <div class="arrow-down"></div>
  Language: <span>English<span>
</a>

这给了我一个你想要的展示

---

但一般来说，将div封装在一个数组中不是一个好主意，您可能会注意新添加的显示：inline块；在css定义中，这定义了与文本在同一行中显示的div，这是此处的关键点。

您可以通过为语言图标锚定类提供以下样式来实现这一点：

position: relative;
top: 0; left: 0; /* Important for some browsers */

然后将箭头的样式设置为：

.arrow-down{
    /*...*/
    position: absolute;
    right: 1px;
    top: 45%;
    /*...*/
}

位置：绝对将绑定到最近的祖先与非静态定位，因此位置：相对以上。请确保为.language图标提供了足够的正确填充，以容纳

我建议给语言图标一个固定的颜色和高度

width: 110px;
height: 30px;

将此添加到。向下箭头

并将div更改为span

---

您需要在CSS中使用position attributer

.language-icon {
position:relative;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 8px;
padding-left: 27px;
display: inline-block;
font-size: 11px;  
width: auto;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/30x30") no-repeat 0 0 ;
}

.arrow-down {
 width: 0; 
height: 0; 
border-left: 5px solid transparent;
border-right: 5px solid transparent;  
border-top: 5px solid #202020;
position:absolute;
top:5px;
right:0%;

---

}

这正是我想要的按钮。非常感谢！

width: 110px;
height: 30px;

position: relative;
right:-4px;
top:5px;
float: right;

.language-icon {
position:relative;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 8px;
padding-left: 27px;
display: inline-block;
font-size: 11px;  
width: auto;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/30x30") no-repeat 0 0 ;
}

.arrow-down {
 width: 0; 
height: 0; 
border-left: 5px solid transparent;
border-right: 5px solid transparent;  
border-top: 5px solid #202020;
position:absolute;
top:5px;
right:0%;