HTML + CSS : Indent a paragraph after icon

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 */
}

Live demo

---

如果您确实需要边框，请将文本包裹在一个跨度中:

<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 */
}

Live demo