0

だから私はこれをリストブレットのようなものにしようとしていますが、ナビゲーションボタンの終わりにあります。

ブラックトライアングルの位置が高すぎるという問題があります。それは私が持っているテキスト（黒のBG付き）よりも高くなります。

以下は私の問題の例です。

http://dabblet.com/gist/3483670

いろいろ試してみましたが、完全に困惑しています。おそらく私が見落としている愚かなことですが、私が気付いていない深刻な回避策が必要になるかもしれません。

すべての助けをありがとう。

リンクが機能しない場合。下記参照。

CSS

 a {font: 19px/26px 'Exo',Arial,sans-serif;
    list-style: none outside none;
    margin: 0 0 0 -10px;
    padding: 0 0 58px;
    font-weight:100;
    text-transform: uppercase;
    width: 100%;
    text-decoration:none;}

    a[rel="catagory"] { background:#000000; padding:0 5px 0 5px; color:#BAFF32;}

.triangle { width: 0;
    height: 0; 
    background:no-repeat right center;
    border-top: 0px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid black;
    display:inline-block;}

HTML

<a href="index.html" rel="catagory"><span class="plus">+</span> <span>HOME</span></a><span class="triangle"></span>
4

1 に答える 1

2

あなたは付け加えられます

a[rel="catagory"] {
    vertical-align:middle;
    display:inline-block;
    width:auto;
    line-height:25px;
}
.triangle {
    vertical-align:middle
}

説明：

それらを揃える部分は

a[rel="catagory"] {vertical-align:middle;}
.triangle {vertical-align:middle}

ただし、アンカーの高さは22ピクセルなので、

a[rel="catagory"] {
    display:inline-block;
    line-height:25px;
}

高さを25pxにするために。

しかし、あなたには別のルールがあります（なぜだろうか）：

a{width:100%}

display:inline-blockアンカーを設定する前にがありdisplay:inline、そのルールは何もしません。

しかし、今は機能し、無効にしたいので、

a[rel="catagory"] {
    width:auto;
}
于 2012-08-26T21:37:29.663 に答える