2

これは私が達成しようとしているものであり、かなり近づいています:

ここに画像の説明を入力

これは私のCSSです：

li {
    float: left;
    position: relative;
    padding-left: 55px;
    background: url(../../images/separator.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    height: 87px;
}       

a {
    font-size: 15px;
    line-height: 67px;
}

私はほとんどそこにいますが、いくつかの問題があります。メニュー項目をセパレーターの中央に垂直に配置する唯一の方法は、line-height を使用することでした。しかし、もちろん、リンクにカーソルを合わせると、ホバーは行の高さの高さになり、私はそれを望んでいません。

また、写真のように、メニュー項目をセパレーター画像の「内側」に入れる方法はありますか? 区切り画像は透明な png です。そうでない場合は、メニュー項目のパディングを減らして、それらを近づけてみます.

4

2 に答える 2

1

最初の方法:

リンクに高さを指定し、上から 50% の位置に配置し、高さの半分を上に戻します。

a {
    font-size: 15px;
  height:30px;
  display:block;
  position:relative;
  top:50%;
  margin-top:-15px;
}

デモ http://jsbin.com/ovaqix/1/edit

2 番目のソリューション

a 要素 display:table-cell を li と同じ高さにし、vertical-align を使用します。

a  {
  display:table-cell;
  height:87px;
  vertical-align:middle;
}

デモ

http://jsbin.com/ovaqix/2/edit

表セルが IE7 で機能しない

于 2013-01-06T12:31:35.953 に答える
0

a:hover の高さを変更してみましたか?

メニュー項目をセパレーター内に入れるには、三角形を生成するためのボーダー ハックを使用して、疑似要素の前後に作成する必要があると思います。彼の行の何か：

a:before {
    border-top: 38px solid transparent;
    border-bottom: 60px solid transparent;
    border-right: 60px solid black;
}

詳細を教えていただければ、より具体的に説明できます。

于 2013-01-06T12:31:11.413 に答える