[英]horizontal line with dots between them
Can I achieve this without using <hr>
? 我可以不使用
<hr>
吗? I want the horizontal and vertical lines with the dots. 我想要带点的水平和垂直线。 This is what I did for the horizontal one and it doesn't look nice am not sure how to do the vertical one even.
这是我对水平方向的图片所做的,而且不确定如何进行垂直方向的图片效果也不佳。 Add a fiddle please.
请加一个小提琴。
<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;
}
This is pretty straightforward with pseudo elements: 对于伪元素,这非常简单:
http://jsfiddle.net/Es4wY/1/ 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;
}
Edit - here's a vertical one. 编辑-这是一个垂直的。 The css is not quite as pretty, but it works.
CSS并不是很漂亮,但是可以工作。 http://jsfiddle.net/b5U5M/1/
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;
}
Add a class dots
to the center div, and add the following CSS: 向中心div添加一个类
dots
,并添加以下CSS:
div.dots {
border-bottom: 3px dotted #aaa;
width: 20px;
}
That will give you more authentic dots, and you can mess with the sizing and color. 这将为您提供更多真实的点,并且您可能会弄乱尺寸和颜色。 You'll then want to wrap
.dots
in a parent div
that centers it. 然后,您需要将
.dots
包装在将其.dots
的父div
中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.