3

适合所有网页设计师的...

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

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

诀窍是，我想这样做没有：

  • 使用表格
  • 指定 div 高度

使用图标字体 (@font-face) 将单个字符呈现为图标。有人对如何仅使用 HTML + CSS 进行此操作有任何建议吗？

4

2 回答 2

9

我提出了这个：

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

现场演示

于 2012-09-26T14:41:38.943 回答
0 
  <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>
于 2012-09-26T14:48:31.077 回答