文章/答案/技术大牛

发布

社区首页 >问答首页 >在它们之间有点的水平线

问在它们之间有点的水平线
EN

Stack Overflow用户

提问于 2014-06-12 16:49:18

回答 2查看 1.3K关注 0票数 2

我可以在不使用<hr>的情况下实现这一点吗？我要有圆点的横线和垂直线。这是我做的卧式的，它看起来不太好不知道如何做垂直的一个甚至。请加一把小提琴。

<div class="horizontaltop" runat="server"></div>
<div align="center">...</div>
<div class="horizontalRule" runat="server"></div>

div.horizontaltop{
    clear:both;
    width:100%;
    background-color:#d1d1d1;
    height:1px;
    margin-top:10px;
    margin-bottom:0px;
}
div.horizontalRule{
    clear:both;
    width:100%;
    background-color:#d1d1d1;
    height:1px;
    margin-top:1px;
    margin-bottom:1px;
}

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-06-12 16:58:46

对于伪元素来说，这是非常简单的：

http://jsfiddle.net/Es4wY/1/

<div class="dotted-border">Your content</div>

.dotted-border {
    border-bottom: 1px solid #d1d1d1;
}

.dotted-border:after {
    border-top: 1px solid #d1d1d1;
    content: "\2022\2022\2022";
    display: block;
    font-size: 8px;
    letter-spacing: 3px;
    text-align: center;
}

编辑-这是一个垂直的。css并不是很漂亮，但它能工作。http://jsfiddle.net/b5U5M/1/

.dotted-border-vertical {
    border-right: 1px solid #d1d1d1;
    height: 200px;
    position: relative;
}

.dotted-border-vertical:after {
    border-left: 1px solid #d1d1d1;
    content: "\2022\A\2022\A\2022";
    display: inline-block;
    font-size: 8px;
    height: 120px;
    line-height: 0.8;
    padding-top: 80px;
    position: absolute; right: 0; top: 0;
    text-align: center;
    width: 5px;
}

票数 6

Stack Overflow用户

发布于 2014-06-12 16:55:26

向中心div添加一个类dots，并添加以下CSS：

div.dots {
  border-bottom: 3px dotted #aaa;   
  width: 20px;
}

这将给你更真实的点，你可以混乱的大小和颜色。然后，您将需要将.dots包装在以其为中心的父div中。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24189821

复制

相似问题

问在它们之间有点的水平线
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在它们之间有点的水平线EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在它们之间有点的水平线
EN