从屏幕左侧到居中div的末尾的线

Question

我想从屏幕左侧到居中的一端做一条1像素的线div.以... div为中心margin: auto;.

此图显示了它应该如何显示:

Answer 1

这是使用calc的一个例子:

.box{
    width:200px;
    height:200px;
    border:1px solid blue;
    margin:0 auto;
}

.line{
    border: 1px solid red;
    width: calc(((100% - 200px)/2) + 200px);
}

的jsfiddle

浏览器支持

Answer 2

这个解决方案怎么样？不需要额外的标记,跨浏览器并且不依赖于元素的宽度

#content {
    width:400px;
    height: 200px;
    margin:auto;
    position: relative;
}

#content:before{
    content: '';
    height: 1px;
    background: red;
    position: absolute;
    top: -5px;
    right: 0;
    width: 999%; /*a large number*/
}

演示小提琴

Answer 3

这是另一个解决方案，它是跨浏览器的http://jsfiddle.net/9qrSy/3

<div class="inner"></div>
<div class="wrapp"></div>

css 



   body {
    padding:8px;
}
div.wrapp {
    width:300px;
    height:300px;
    border:2px solid green;
    margin:auto;
    position:relative;
}
div.wrapp:before {
    content:'';
    position:absolute;
    width:100%;
    height:1px;
    right:0;
    top:-6px;
    background:blue;
    z-index:1;

}
.inner {
    width:50%;
    float:left;
    position:absolute;
    height:1px;
    left:0;
    top:12px;
     background:blue;


}