2

私のコードは非常に単純ですが、css3の三角形をテキスト「クリック」の中央に移動したいと思います。誰か助けてくれませんか？

**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/

4

2 に答える 2

0

境界線を配置する方法があるかどうかはわかりませんが、このような方法でうまくいくはずです。

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/

于 2012-11-24T09:19:04.907 に答える
0

余分な要素を追加したくないので、これが唯一の方法です。text-indentli に追加すると、うまくいきました。

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/

于 2012-11-24T09:30:42.483 に答える