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

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>

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

2 个答案: