Question

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

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

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

HTML：

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

CSS：

    .language-icon {
      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("images/language-sprite.png") no-repeat 0 0 ;
    }

    .language-icon span {
      font-weight: bold;
    }

    .language-icon:hover { 
      background: #fff url("images/language-sprite.png") no-repeat 0 -20px ; 
      color: #d13030;
      border: 1px solid #c6c6c6;
      box-shadow: 0px 1px 0px #e5e5e5;
     }

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

Answer 1

您可以通过为language-icon锚类提供以下样式来实现此目的：

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

然后设置你的箭头样式：

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

position:absolute将绑定到最近的具有非静态定位的祖先（因此position:relative以上）。确保为.language-icon提供足够的正确填充以容纳。

Updated example

Answer 2

我建议给.language-icon一个固定的和高度

width: 110px;
height: 30px;

将此添加到.down-arrow

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

并将div更改为span。

http://cssdeck.com/labs/full/pk1qwjhi

Answer 3

试试这个CSS属性：

display:inline;

Answer 4

我试图将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 包装在 a 中并不是一个好主意，你可能会注意新添加的显示：inline-block ; 在css定义中，它定义了与文本显示在同一行的div，并且是此处的关键点。

Answer 5

你需要在CSS中使用position属性

.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%;

}

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

5 个答案: