HTML + CSS:在图标后缩进一个段落

Question

一个适合所有网页设计师......

我想在它之后显示一个字符并缩进一个段落 - 就像在这里的图表中一样:

http://dl.dropbox.com/u/43015072/indent.jpg

诀窍是,我想这样做没有:

• 使用表格
• 指定div高度

使用图标字体(@ font-face)将单个字符渲染为图标.有没有人对如何使用HTML + CSS进行此操作有任何建议？

Answer 1

我出来了:

p {
    padding-left:20px; /* adjust it to your custom font needings */
    position:relative;
}
p:before {
    content: "x";
    font-family:Arial; /* add your custom font here */
    position:absolute;
    left:5px; /* adjust it to your custom font needings */
}

现场演示

如果您确实需要边框,请将文本换行:

<p><span>Lorem ipsum dolor sit amet...</span></p>?

并添加此规则:

p {
    /* same as before */
    border:1px solid red;
}
p span {
    display:block;
    border-left:1px solid red;
    padding-left:5px; /* or whatever you want */
}

现场演示