5

我正在使用 css 显示一条水平线：

.horizontalLineBottom {
    border-bottom:solid #6E6A6B;
    border-width:1px;
}

我可以在这条线上插入一个特定的位置吗？

所以

______________________________________________

变成

______________________________             ___
4

7 回答 7

3

另一种解决方案使用border-width：

.line {
    width: 20px;
    height: 1px;
    padding: 0;
    border-width: 0 100px 0 150px;
    border-style: solid;
    border-color: red;
}

http://jsfiddle.net/dfsq/Uttxy/1/

于 2013-02-15T10:01:02.087 回答
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;
}
于 2013-02-15T09:46:17.057 回答
0

没有块中的边框（只是块的边框）。

如果适合您的需要，您可以添加背景图像。

于 2013-02-15T09:45:29.137 回答
0

您无法通过 CSS 直接实现这一点。我建议 2 个解决方案 1）您可以使用 _ 字符并使其看起来像一条线并在您想要的任何位置插入空格并通过 CSS 提供颜色属性。2）使用两个元素，第一个元素有一些宽度和一些边距。边距权将为您提供所需的空间

于 2013-02-15T09:47:31.027 回答
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%);
}
于 2013-02-15T09:54:44.203 回答
0

您不能直接执行此操作，而是使用伪元素的一个小解决方法。诀窍是创建一个与元素下方背景颜色相同的小叠加层。

.verticalLineBottom { 
  position: relative; 
  border-bottom: 1px solid #6E6A6B; 
}
.verticalLineBottom:after { 
  content: ""; 
  position: absolute; 
  right: 20px; 
  bottom: -1px; 
  width: 100px; 
  height: 1px; 
  background: #fff;
}

示例：http: //jsfiddle.net/zxdS7/

不幸的是，如果元素后面的背景有图案，它就不起作用。

于 2013-02-15T09:56:31.010 回答
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：点击

于 2013-02-15T09:57:14.010 回答