HTML + CSS：在图标后缩进段落

Question

给所有网页设计师一个建议...

我想展示一个字符，并在其后缩进一个段落 - 就像这个图表中的展示:

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

诀窍是，我想在不使用以下方法的情况下完成这个目标:

• 使用表格
• 指定div高度

这个单一的字符使用图标字体(@font-face)呈现成一个图标。 有人有任何建议如何只使用HTML + CSS来实现它吗？

- dai.hop

---

你有没有考虑过使用自定义的项目符号字符？http://ask.metafilter.com/156206/Using-a-character-as-a-custom-list-bullet - Jacob Tomlinson

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

演示链接

---

如果您确实需要边框，请将文本包装在一个 span 标签中：

<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

- Giona

Answer 2

  <style type="text/css">
    #con{margin:0 auto; width:700px;}
    #left{height:auto;float:left; width:100px;}
    #right{height:auto; float:right;  width:600px; } 
  </style>
  <div id="con">
    <div id="left"></div>
    <div id="right"></div>
  </div>

- arun