4

前几天我在浏览这个 iA 博客文章，并试图弄清楚他们是如何在日期周围使用点作为分隔符的。

我查看了 CSS，发现只有使用他们自己的特殊字体才有可能。有没有办法在不使用他们的字体的情况下做到这一点？如果不使用图像来做同样的事情，会有什么黑客行为？

截图如下：

博客

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

例如，您可以使用div顶部带有虚线边框的 a ，就像在这个jsFiddle中一样。

基本上，您可以将文本放在边框上（即使用绝对定位）并为其应用白色背景。

<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 回答