Question

我有以下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>

它运行正常，但正如您所看到的，我有一堆 将文本推向右侧。否则，它位于图片的顶部。有一个更好的方法吗？

感谢。

Answer 1

不出所料，要缩进文本，您应该使用text-indent CSS属性。

#header h1 {
  text-indent: 1em;
  /* ... */
}

Answer 2

添加：

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

必须工作。

Answer 3

您有几个选择，但text-indent似乎最合适。

Answer 4

这取决于你想要缩进的是，你是从另一个元素还是从另一个文本缩进。

p {
  margin-left: 20px;
}

p {
  text-indent: 20px;
}

Answer 5

如果您不希望图像位于文本的背景中，则将图像标记中的图像分离看起来是最佳选项。

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也可以用于填充左边。

如果间距不是一个问题，你只需要将文本放在右边而不是将图像作为背景放在左边，你可以这样做：http://cssdeck.com/labs/wml9occf但这可能不是最好的选择。

css新手寻找更优雅的css解决方案来缩进文本

5 个答案: