0

私はナビゲーション div を持っています。たとえば、リンクではなく img のみのボタンがあります。この画像が行を追加した後、アリの前に必要です:

#nav{                   
    height: 50px;
    width: auto;
    margin: 0 auto;
    margin-top: 30px;
    padding: 0;}

#nav ul li img{
    padding: 0; margin: 0;}

html:

<li><img src="./img/dot.gif" alt=""/></li>

このコードを css に追加して、画像の前後の行を追加します。

#nav ul li img:before{
  background: url('./img/orange-pixel.gif') repeat-x 50% 50%; 
  width: 40px; 
  height: 3px; 
  float: left; 
  padding-top: 45px;} 
#nav ul li img:after{
  background: url('./img/orange-pixel.gif') repeat-x 50% 50%; 
  width: 40px; 
  height: 3px; 
  float: left; 
  padding-top: 45px;}

しかし、行は表示されません。

4

2 に答える 2

3

この投稿によると、ほとんどのブラウザーはタグの:before/:afterを計算しません。imgとにかくあなたを助けるために：画像に境界線を追加して線を設定してみませんか. または、タグで:before/を使用しますか?:afterli

于 2012-11-27T14:32:56.263 に答える
1

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

content:".";
text-indent:-9999em;
display:block

あなたの :before & :after に。これが行うことは、「つかむ」何かを与えることだけであり、機能するはずです。

基本的な線であれば、li の片側に枠線を追加してみませんか? :before と :after は従来のブラウザーでは機能しないため、必要な場合はより一貫したエクスペリエンスになります。

于 2012-11-27T14:46:36.447 に答える