Question

我的代码非常简单，但我想将css3三角形移动到文本的中间位置＆＃34;点击＆＃34;。有人可以帮帮我吗？

**HTML**
<li><a href="#" class="arrow">click</a></li>


**CSS**
li{list-style:none; }
.arrow{
    width: 0px;
    height: 20px;
    border-style: solid;
    display:block;
    border-width: 0 5px 8px 5px;
    border-color: #000 transparent;
}

在线代码：http://jsfiddle.net/8rRyf/

Answer 1

我不确定是否有办法定位边框，但这样的事情应该可以解决问题。

li{list-style:none; }

a {
    display: block;
    width: 40px;            
}

.arrow{
    position: relative;
    width: 0px;
    height: 0px;
    margin: 0 auto;
    border-style: solid;
    display:block;
    border-width: 0px 5px 8px 5px;
    border-color: #000 transparent;
}


<li><a href="#">click<span class="arrow"> </span></a></li>

http://jsfiddle.net/8rRyf/19/

Answer 2

我不想添加任何额外的元素，到目前为止，这是解决它的唯一方法。在li中添加text-indent做了诀窍！

li{list-style:none; margin-left:20px; text-indent: -8px;}


.arrow{
    width: 0px;
    height: 20px;
    border-style: solid;
    display:block;
    border-width: 0 5px 8px 5px;
    border-color: #000 transparent;
}

http://jsfiddle.net/8rRyf/24/

CSS3元素类位于文本下方

2 个答案: