2

我有以下CSS类:

#header h1 {
   float:left;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   font-size: 2.5em;
   margin-top: 8px;
   margin-left: 0.8em;
   padding-left: 40px;
   background: url("h1bkgrnd.png") no-repeat left center;
   height: 100px;
}

这个html:

 <div id="header">
   <h1><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Our Services</h1>
</div>

它工作正常,但正如你所看到的,我有一堆&nbsp;将文本推到右边。否则,它位于图片的顶部。有一个更好的方法吗?

谢谢。

4

5 回答 5

8

不出所料,要缩进文本,您应该使用text-indentCSS 属性。

#header h1 {
  text-indent: 1em;
  /* ... */
}
于 2013-05-22T19:28:24.950 回答
1

添加:

#header h1 {
    padding-left: 20px; /*Or according with the picture size you have*/
}

必须工作。

于 2013-05-22T19:30:03.753 回答
0

你有几个选择,但text-indent似乎是最合适的。

于 2013-05-22T19:28:41.250 回答
0

这取决于您要缩进什么,您是从另一个元素缩进还是从另一个文本缩进。

p {
  margin-left: 20px;
}

p {
  text-indent: 20px;
}
于 2013-05-22T19:30:48.893 回答
0

如果您真的不希望图像位于文本的背景中,则将图像分离到图像标签中似乎是最佳选择。

HTML:

<img src="http://placekitten.com/g/50/100"/>
<h1>Our Services</h1>

CSS:

img{
 float:left;
 width:50px;
 height: 50px;
}

h1{
 padding-left: 60px;
}

http://cssdeck.com/labs/xixebfxw。在这种情况下,我必须通过提供适当的宽度和高度作为文本来重新调整图像的大小!此外,margin-left 也可以用于 padding-left。

如果间距不是问题,您只需将文本放在右侧,将图像放在左侧而不删除图像作为背景,您可以这样做:http ://cssdeck.com/labs/wml9occf但这可能不是最好的选择。

于 2013-05-22T20:07:55.287 回答