3

すべての Web デザイナーに 1 つ...

次の図のように、文字を表示し、その後に段落をインデントしたいと思います。

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 に答える