背景图片旁边的文字不沃金

-1

#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>

的问题是，“左箭头”背景图片（在范围内）在左边，并且不太接近文本。

我的问题是我该如何解决这个问题，所以图片会真的在文本旁边？

感谢

来源

2013-04-26 Nave Tseva

你可以提供一个[的jsfiddle（http://jsfiddle.net）？ – Adrift 2013-04-26 14:48:55

我不能，对不起，（因为没有选择看到那里的网络，所以它将是无用的）.. – 2013-04-26 14:57:09

当使用jsFiddle时，更改您的链接以使用完整的URL图像。 – j08691 2013-04-26 14:58:29

您可以定位与背景位置的背景图像：

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-26 15:00:36 Wipster

我试过了，它不起作用。 – 2013-04-26 15:03:29

我已经添加了CSS。对我来说它的工作。（Chromium 20）这里是小提琴：http://jsfiddle.net/c48x4/1/ – Wipster 2013-04-26 15:04:33

谢谢！这是真的更好，但问题是，箭头附近的文字是动态的，所以箭头的位置不能是静态的。 – 2013-04-26 15:06:09

背景图片旁边的文字不沃金

回答

相关问题