使用css显示水平线:
.horizontalLineBottom {
border-bottom:solid #6E6A6B;
border-width:1px;
}
我可以将空格插入此行的特定位置吗?
所以
______________________________________________
变为
______________________________ ___
答案 0 :(得分:3)
使用border-width
的另一种解决方案:
.line {
width: 20px;
height: 1px;
padding: 0;
border-width: 0 100px 0 150px;
border-style: solid;
border-color: red;
}
答案 1 :(得分:1)
:after
或:before
伪类可以帮助您。就像在这个Fiddle
中一样:
div {
width:100px;
height:100px;
border:1px solid #000;
margin:50px;
background:yellow;
position:relative;
}
div:after {
content: '';
height:60px;
width:1px;
position:absolute;
top:20px;
left:-1px;
background:yellow;
}
答案 2 :(得分:0)
否则在块中有边框(只是块的边框)。
如果符合您的需要,您可以添加背景图片。
答案 3 :(得分:0)
你无法通过CSS直接实现这一点。 我建议2个解决方案 1)你可以使用_字符使其看起来像一条线,并在任何你想要的地方插入空格,并通过CSS给出颜色属性。 2)使用两个元素,第一个元素有一些宽度,一些边缘右边。 保证金权利将为您提供所需的空间
答案 4 :(得分:0)
您可以在元素上使用background
渐变:http://jsfiddle.net/q652t/
然后你可以创建任意多个
.line {
margin: 10px;
height: 1px;
width: 400px;
background: -webkit-linear-gradient(
left, gray 10%, white 10%, white 40%,
gray 40%, gray 60%,
white 60%, white 80%,
red 80%, red 100%);
}
答案 5 :(得分:0)
您无法直接执行此操作,但使用伪元素进行小型解决方法。诀窍是创建一个与元素下方背景颜色相同的小叠加层。
.verticalLineBottom {
position: relative;
border-bottom: 1px solid #6E6A6B;
}
.verticalLineBottom:after {
content: "";
position: absolute;
right: 20px;
bottom: -1px;
width: 100px;
height: 1px;
background: #fff;
}
不幸的是,如果元素背后的背景有图案,它就不起作用。
答案 6 :(得分:0)
我为你创建了这个代码,这会伪造你正在寻找的结果。
.stopped-line {
/* basic styles here */
width: 100px; /* this is mandatory */
position: relative;
}
.stopped-line:before {
position: absolute;
bottom: 0;
display: block;
width: 70%; /* width in percentage of the line */
content: " ";
height: 1px; /* thickness of the line */
background: #000; /* color of the line */
}
.stopped-line:after {
position: absolute;
bottom: 0;
left: 80%; /* Where should the second line start? */
display: block;
width: 20%; /* width in percentage of the line */
content: " ";
height: 1px; /* thickness of the line */
background: #000; /* color of the line */
}
JSBin:click