4

私は先日、この iA ブログの投稿をサーフィンしていて、どのようにしてドットを日付の区切りとして使用したのかを理解しようとしました。

CSS を調べたところ、独自の特別なフォントでのみ可能であることがわかりました。フォントを使わずにそれを行う方法はありますか? 画像を使わずに同じことをするハックとは?

以下のスクリーンショット:

iAブログ

4

5 に答える 5

4

私はかつて同じ質問をして、これを思いつきました：

.lined{ display:table-row; width:auto; white-space:nowrap; position:relative; }
.lined:before,.lined:after {content:''; 
display:table-cell; 
width:50%;
position:relative;
height:20px;
background: url(http://www.xpy.gr/css/img/text-deco.png) 7px no-repeat;
}

疑似要素といくつかのテーブルのような機能を使用します。いくつかの制限がありますが、常に最大幅まで伸びます。を変更してbackground、選択した要素にクラスを追加するだけです。

デモ: http://dabblet.com/gist/2172806

于 2013-03-10T11:22:24.607 に答える
3

負の (相対 em) マージンを使用して、ヘッダーを包含ブロックの点線の上端に配置しました。これにより、フォントサイズが変更されたときにコードが保存されます。例については、 CodePenを参照してください。

于 2013-03-10T09:41:07.893 に答える
2

たとえば、このjsFiddledivのように、上部に点線の境界線があるa を使用できます。

基本的に、境界線の上にテキストを配置し (つまり、絶対配置で)、白い背景を適用できます。

<div>
    <p>I. JUNE 2012</p>
</div>


div {
  border-top: 2px dotted #eee;
  position: relative;
  text-align: center;        
}

p {
  background: white;
  position: absolute;
  top: -25px;
  padding: 0 10px;
}
于 2013-03-10T08:43:18.917 に答える
1

点線の境界線を持つ要素を作成し、その中に背景が白で親の高さを超える位置を持つ要素を中央に配置します。

大まかな例:

HTML

<div class="title_container">
    <div class="title">I. June 2012</div>
</div>

CSS

.title_container {position:relative;height:20px;border-bottom:1px dotted #000;}

.title_container .title {display:table;position:relative;top:10px;left:0;right:0;margin:0 auto;padding:0 10px;background:#FFF;}

jsFiddle のデモを見る

于 2013-03-10T08:43:41.597 に答える
0

このようなものを使用できます。ただし、フォントやサイズの変更に対しては、おそらくそれほど堅牢ではありません。

HTML：

<div id='container'>
    <div class='dotted'>
        <span>2013-03-10</span>
    </div>
</div>

CSS：

#container {
    width: 30em;
}

.dotted {
    text-align: center;
    position: relative;
    top: 1em;
    border-top: 1px dotted #888;
    overflow-y: visible;
}

.dotted span {
    display: inline-block;
    position: relative;
    top: -0.75em;
    background: #fff;
    padding: 0 1ex;
}
于 2013-03-10T08:55:49.513 に答える