-1

次のCSSコードがあります。

#left .gcontent { display: block; margin-bottom: 20px; border-radius:5px; width:300px; }
#left .gcontent .head { background: #589fc6; border: 1px solid #3e82a7; padding-right: 8px; border-top-left-radius:5px; border-top-right-radius:5px; }
#left .gcontent .head h1 { color: #fafcfd; font-weight: bold; font-size: 1.1em; padding:0; margin:0; text-decoration:none; }
#left .gcontent .boxy { border-radius: 0px 0px 5px 5px; border: 1px solid #ccc; border-top: 0px; padding: 10px 8px; background: #f9f9f9; }
#left .gcontent .boxy span { font-size: 1.2em; display: block; margin-top: 7px; background-image:url(../images/main/left-arrow.png); background-repeat:no-repeat; background-size:15px 15px; clear:right;} 
#left .gcontent .boxy p {line-height:25px; }

そしてこのHTMLソース

<div class="gcontent">
    <div class="head">
        <h1>TITLE </h1>
    </div>
    <div class="boxy">
        SOME TEXT
        <span>TEXTY TEXT</span>
    </div>
</div>

問題は、「左矢印」の背景画像 (スパン内) が左側にあり、テキストにあまり近くないことです。

私の質問は、どうすればこれを修正して、写真がテキストの隣に表示されるようになるのでしょうか?

ありがとう

4

1 に答える 1

0

background-position を使用して背景画像を配置できます。

http://www.w3schools.com/cssref/pr_background-position.asp

#left .gcontent .boxy span
{
    font-size: 1.2em;
    display: block;
    margin-top: 7px;
    background-image: url('left-arrow.png');
    background-repeat: no-repeat;
    background-size: 15px 15px;
    clear: right;
    background-position: left;
    background-position: 200px 0px;
 }
于 2013-04-26T15:00:36.710 に答える