1

我有图像（橙花），我想把它移到 li 的右侧。

嵌入<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”更改为“right”，这意味着它将水平放置在右侧，距离顶部 1 px。

于 2012-10-16T07:04:33.350 回答
1

添加background-position:right;on#menu li a并调整填充，例如padding-right:10px;on#menu li和padding-right:15px;on #menu li a。

你可以在这里看到它：http: //jsfiddle.net/5gGum/29/

于 2012-10-16T07:13:06.873 回答