1

右から左に配置されたWebサイト（ヘブライ語）で作業しており、テキストの右側にアイコンを表示したいと思います。例：http ：//kaptinlin.com/themes/striking/shortcodes/typography/下部のContact Usウィジェット、アイコンは左側にあり、右側に配置したい。

関連するコード（HTML）は次のとおりです。

<section id="contact_info-3" class="widget widget_contact_info">
    <h3 class="widgettitle">Contact Us</h3>

    <p><span class="icon_text icon_phone default">(+40) 111 222 333</span></p>

    <p class="contact_address">
        <span>city,&nbsp;state</span>
        <span class="contact_zip">1111</span>
    </p>
    </div>
</section>

CSS：

.icon_text {
    padding:               0 22px 0 0;
    background-image:      url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons.png");
    background-repeat:     no-repeat;
    background-attachment: scroll;
    background-color:      transparent;
}

#footer .icon_text.default {
    background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/footer_icons.png");
}

.icon_globe {
    background-position: -390px 0px;
}

.icon_home {
    background-position: -360px -30px;
}

.icon_email {
    background-position: -330px -60px;
}

.icon_user {
    background-position: -300px -90px;
}

.icon_multiuser {
    background-position: -270px -120px;
}

.icon_id {
    background-position: -240px -150px;
}

.icon_addressbook {
    background-position: -210px -180px;
}

.icon_phone {
    background-position: -180px -210px;
}

.icon_link {
    background-position: -150px -240px;
}

.icon_chain {
    background-position: -120px -270px;
}

.icon_calendar {
    background-position: -90px -300px;
}

.icon_tag {
    background-position: -60px -330px;
}

.icon_download {
    background-position: -30px -360px;
}

.icon_cellphone {
    background-position: 1px -390px;
}

.icon_text.default {
    background-image: url("http://kaptinlin.com/themes/striking/wpcontent/themes/striking/images/icons_black.png");
}

.icon_text.black {
    background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_black.png");
}

.icon_text.gray {
    background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_gray.png");
}

.icon_text.red {
    background-image: url("../images/icons_red.png");
}

.icon_text.orange {
    background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_orange.png");
}

.icon_text.magenta {
    background-image: url(http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_magenta.png);
}

.icon_text.yellow {
    background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_yellow.png");
}

.icon_text.blue {
    background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_blue.png");
}

.icon_text.pink {
    background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_pink.png");
}

.icon_text.green {
    background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_green.png");
}

.icon_text.rosy {
    background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_rosy.png");
}

ありがとう。

4

2 に答える 2

1

アイコンはsなので、簡単に言うと、アイコンを左側から右側に移動するには、プロパティとプロパティを調整するbackground-image必要があります。paddingbackground-positiontext-align

いくつかの調整を行う必要があります。まず、パディングが左側ではなく右側に設定されていることを確認する必要があります。background-position次に、アイコンを右側に配置するように調整する必要があります。

.icon_text {
    padding: 0 22px 0 0; /* changed from 0 0 0 22px on live site*/
    background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-color: transparent;
}

.contact_info_wrap .icon_text, .contact_info_wrap .contact_address {
    padding-right: 26px; /* changed from padding-left on live site */
}

.icon_phone { /* obviously you would change each of the icons as necessary */
    background-position: -72px -210px; /* changed from -180px -210px */
}

ただし、これを行うと、アイコンが右側で互いに一致しなくなります。pしたがって、タグを調整してテキストを右揃えにする必要があります。

.contact_info_wrap p {
    margin-bottom: 5px;
    text-align: right; /* add this */
}

タイトルも揃えたいと思います。

#footer h3.widgettitle {
    color: #FFFFFF;
    font-size: 24px;
    text-align: right; /* add this */
}
于 2012-04-29T22:12:21.530 に答える
0

rtlに関する質問についてさらにサポートが必要な場合は、Strikingサポートフォーラムにアクセスしてください。サポートいたします。RTLは一般的に簡単です。すべての本文テキストをrtlに移動するためのコードを提供し、要素の移動が不明な特定の要素を支援します。

于 2013-01-09T04:34:05.877 に答える