2

これは私のコードです:

<ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link 2</a></li>
</ul>

メニューは垂直でul、特定の幅があります。

私がやりたいことは次のことです:

------ ul width 300px ------
[link][image repeat........]
[link 2][image repeat .....]

ここに画像の説明を入力

  • 画像repeat-xul幅とrepeat-yテキストの高さ

使用してみa:afterましたが、特定の幅を与えるテキスト/画像コンテンツがないと使用できません。私の画像は幅が 3px しかないので、一度だけ表示します。ul幅の終わりまで画像を表示するにはどうすればよいですか(a:afterもちろん使用します)?

4

2 に答える 2

4

使いやすさの観点から、固定幅のリンクのリスト (右側にパターンの塗りつぶしが繰り返される) は、パターンの塗りつぶしを含む、その項目の幅全体でクリックできる必要があります。しかし、あなたは非常に頑固そうなので、:afterこのFiddleはどうですか?

content背景を持つ何かがあるように、属性に文字を追加する必要があります。残念ながら、何らかの理由でcontent: '\0020';(エンコードされたスペース) を機能させることができなかったので、かなり無害なものを使用してから、 で色を透明に設定しましたrgba(0,0,0,0)。すべてのブラウザーが rgba をサポートしているわけではありませんが、それを修正するリソースがあります。そのルートを使用しない場合は、おそらくパイプ (|) 文字 (パターン化された画像の左端に揃えられるため) をパターンの主な色に設定できます。私の場合、画像にある濃い灰色に設定できました。

いずれにせよ、これで問題を解決するのに十分なはずです。そうでない場合はお知らせください。

于 2012-09-12T04:00:04.210 に答える
1

content: "\00a0";css スタイルの外観を強制します:after:-)

于 2013-05-28T12:39:10.367 に答える