Question

我正在制作一个从右到左对齐的网站（阿拉伯语），并希望图标显示在文本的右侧。这是Css代码

    ul.list-disc li       { background-position: -480px 6px; }
    ul.list-circle li     { background-position: -460px -14px; }
    ul.list-square li     { background-position: -440px -34px; }
    ul.list-arrow1 li     { background-position: -420px -34px; } 
    ul.list-arrow2 li     { background-position: -400px -74px; } 
    ul.list-arrow3 li     { background-position: -380px -94px; }
    ul.list-arrow4 li     { background-position: -360px -114px; }
    ul.list-arrow5 li     { background-position: -340px -134px; }
    ul.sitemap li         { background-position: -340px -134px; }
    ul.list-bullet1 li    { background-position: -320px -154px; }
    ul.list-bullet2 li    { background-position: -300px -174px; }
    ul.list-bullet3 li    { background-position: -280px -194px; }
    ul.list-bullet4 li    { background-position: -260px -214px; }
    ul.list-bullet5 li    { background-position: -240px -234px; }
    ul.list-star1 li      { background-position: -220px -254px; }
    ul.list-star2 li      { background-position: -200px -274px; }
    ul.list-star3 li      { background-position: -180px -294px; }
    ul.list-plus li       { background-position: -160px -314px; }
    ul.list-minus li      { background-position: -140px -334px; }
    ul.list-pointer li    { background-position: -120px -354px; }
    ul.list-style1 li     { background-position: -100px -374px; }
    ul.list-check li      { background-position: -80px  -394px; }

    ul.red li            { background-image:url("../images/bullets/list_red.png"); }
    ul.green li          { background-image:url("../images/bullets/list_green.png"); }
    ul.blue li           { background-image:url("../images/bullets/list_blue.png"); }
    ul.yellow li         { background-image:url("../images/bullets/list_yellow.png"); }
    ul.magenta li        { background-image:url("../images/bullets/list_magenta.png"); }
    ul.cyan li           { background-image:url("../images/bullets/list_cyan.png"); }
    ul.orange li         { background-image:url("../images/bullets/list_orange.png"); }
    ul.black li          { background-image:url("../images/bullets/list_black.png"); }
    ul.pink li           { background-image:url("../images/bullets/list_pink.png"); }
    ul.navy li           { background-image:url("../images/bullets/list_navy.png"); }
    ul.gray li           { background-image:url("../images/bullets/list_gray.png"); }

    ul.bullet-check li   { background: transparent url("../images/bullets/check.gif") no-repeat 0 5px; list-style:none; padding-left:25px;   }
    ul.bullet-check      { padding:0;}

    ul.list-tree li      { background-position: -340px -137px; }
    ul.list-tree ul      { border-left:1px solid #aaa; margin-left:20px; }

但图标仍然存在

前图像 http://i.stack.imgur.com/3cPdF.jpg

任何帮助？

Answer 1

1）向您的背景添加background-position，其值为right

在你的情况下，它会是这样的：

ul.bullet-check li   { 
    background: url("../images/bullets/check.gif") center right no-repeat;
}

2）在列表项

上设置padding-right

<强> DEMO

＆＃13;

ul {
  direction: rtl;
}
li {
  list-style: none;
  background: url(http://placehold.it/20x20) center right no-repeat;
  padding-right: 30px;
  margin-top: 10px;
}

＆＃13;

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
<ul>

＆＃13;

带列表图标的RTL

1 个答案: