1

画像（オレンジ色の花）があり、右側に移動したいです。

タグに埋め込まれた画像<a>と書いてfloat:right;いますが、うまくいきません。

理由はわかりません。助けが必要です。どうもありがとうございました。

デモjsFiddle

    <ul id="menu">
                    <li><a href="index.html">home</a></li>
                    <li><a href="learnmore.html">פרטים נוספים</a></li>
                    <li><a href="services.html">learnmore</a></li>
                    <li><a href="about_us.html">about_us</a></li>
                    <li><a href="prices.html">prices</a></li>
                    <li><a href="location.html">location</a></li>
            </ul>​
* { 
    margin:0; padding:0;
    border:0; diraction:rtl;
}
 body{
     text-align:right;
     font-family:Arial;
     font-size: 20px;
     border:1px solid red;
     font:13px Arial, Helvetica, sans-serif; color:#a7a7a7;
     line-height:20px
}
#menu { width:100%;
        border: 5px solid green;
        padding:18px 30px 0 0; border-bottom:1px solid #e2e2e2;}
#menu li { 
    border: 5px solid brown;float:right;padding-right:30px;}
#menu li a{ 

    right:0;
 text-transform:uppercase; text-decoration:none; 
 color:#2c2c25; font-size:18px; line-height:20px;
    float:right; right:0;
     background:url(http://t0.gstatic.com/images?q=tbn:ANd9GcRP4bAv-ruMbgWa8rTLZhWOITQk6aGOI8L_YMrmsRbacuIR502w) 
    7px 1px no-repeat;

}​
4

7 に答える 7

1

このスタイルを

a{
   display:block;
 }

そして取り除くright:0

于 2012-10-16T07:02:22.040 に答える
1

試してみたいと思う

background-position:right;

のため#menu liに。

于 2012-10-16T07:03:25.033 に答える
1

background-position: right;リで使用します。

#menu li {
border: 5px solid brown;float:right;padding-right:30px;
background:url(http://t0.gstatic.com/images?q=tbn:ANd9GcRP4bAv-ruMbgWa8rTLZhWOITQk6aGOI8L_YMrmsRbacuIR502w)
7px 1px no-repeat;
background-position: right;
   }

デモjsfiddle

于 2012-10-16T07:03:27.250 に答える
1

背景の速記が間違っています。試してください

background:url(http://t0.gstatic.com/images?q=tbn:ANd9GcRP4bAv-ruMbgWa8rTLZhWOITQk6aGOI8L_YMrmsRbacuIR502w) 
    no-repeat center right;

Working Demo最小限の CSS で

参照

于 2012-10-16T07:03:50.667 に答える
1

リンクの背景画像として画像を配置するため、画像自体はタグではありません。そのため、float:right機能しません。したがって、次のものが必要です。

background:url("http://t0.gstatic.com/images?q=tbn:ANd9GcRP4bAv-ruMbgWa8rTLZhWOITQk6aGOI8L_YMrmsRbacuIR502w") top right no-repeat;

画像を配置します。またはbottom right、必要に応じて。

于 2012-10-16T07:04:24.550 に答える
1

このような：

background:url(http://t0.gstatic.com/images?q=tbn:ANd9GcRP4bAv-ruMbgWa8rTLZhWOITQk6aGOI8L_YMrmsRbacuIR502w) 
**right** 1px no-repeat;

背景の「7px」を「右」に変更しました。つまり、右に水平に配置し、上から 1 px に配置します。

于 2012-10-16T07:04:33.350 に答える
1

onを追加background-position:right;し、 onやon#menu li aなどでパディングを調整します。padding-right:10px;#menu lipadding-right:15px;#menu li a

ここで確認できます: http://jsfiddle.net/5gGum/29/

于 2012-10-16T07:13:06.873 に答える