9

HTML でレンダリングしたいフォーマットのテキストがいくつかあります。ここに画像があります：

書式設定されたテキストの画像

箇条書きと段落番号を含む灰色の線に注意してください。箇条書きはページの中央に配置し、数字は右揃えにする必要があります。

HTMLでこれを行う方法を考えてみましたが、空白になっています。このフォーマットをどのように捉えますか?

4

6 に答える 6

15

:beforeここでは、および:after疑似要素を使用して大きな効果を得ることができます。

http://jsfiddle.net/yNnv4/1/

これは、最新のすべてのブラウザーと IE8+ で動作します。IE7 のサポートが必要な場合、この回答は適切ではありません :)

#container {
    counter-reset: nums;
}
p {
    position: relative;
    margin: 21px 0;
}
p:before {
    content: '\2022 \2022';
    font-size: 2em;
    position: absolute;
    top: -8px;
    left: 0;
    line-height: 1px;
    color: #888;
    width: 100%;
    text-align: center
}
p:after {
    content: counter(nums);
    counter-increment: nums;
    font-size: 1.5em;
    position: absolute;
    top: -8px;
    right: 0;
    line-height: 1px;
    color: #888;
    font-family: sans-serif
}

counterプロパティについて:

箇条書きを (自動的に) インクリメントすることはできません。

ただし、疑わしい繰り返しで実行できます。

http://jsfiddle.net/N4txk/1/

p:before { content: '\2022' }
p+p:before { content: '\2022 \2022' }
p+p+p:before { content: '\2022 \2022 \2022' }
/* .... */

(または、:nth-child同じ方法で繰り返すこともできます: http://jsfiddle.net/N4txk/ - ただし、IE8 では機能しません。箇条書きは 2 つしかありません)

弾数には上限があるので、それを何回でもコピペしてもいいと思います。

于 2011-06-24T19:53:55.850 に答える
5

このようなものはどうですか？

http://jsfiddle.net/6eTCf/

<div class="separator">
   * <div class="page_number">1</div>
</div>


.separator{
    margin: 5px 0 5px 0;
    color:gray;
    position:relative;  
    text-align: center;
}

.page_number{
    position:absolute;
    right: 3px; 
    top: 0; 
}
于 2011-06-24T19:55:24.523 に答える
1

数字を右にフロートさせ、残りのコンテンツ (箇条書き) を中央に配置します。残りのコンテンツの左右の余白を数字の幅よりも大きくすると、コンテンツは中央に配置されます。

于 2011-06-24T19:53:18.860 に答える
1

全体を div でラップし、ラッパーと段落番号 div の間で相対/絶対配置を使用して、そのような右側の番号を取得します。

これは、その方法を示すフィドルです。

于 2011-06-24T19:56:36.413 に答える
0

私が考えることができるいくつかの方法があります：

  • フロート + 絶対位置 (これについては純粋主義者に説明してもらいます)
  • 古いスタイルのテーブル (これが最も簡単なので説明します):

領域の合計幅が、たとえば 300px の場合

<table><tr>
   <td width="30"></td>
   <td width="240" align="center">bullets</td>
   <td width="30" align="right">number</td>
</tr></table>

多くの人が純粋な CSS を使用することを好みますが、私は自分のテーブルが好きです。

于 2011-06-24T19:53:25.193 に答える
0

私が考えることができるいくつかの方法があります。

<div>段落の間に a を追加してから、2 つ<p>の :<p class="dot"></p>とを追加し<p class="pnum">1</p>ます。

を段落の幅に合わせてスタイル<div>設定し、CSS で次のように設定します。

.dot{ text-align: center; }
.pnum{ float: right; }
于 2011-06-24T19:57:03.323 に答える