Линия с левой стороны экрана до конца центрированного div

Question

Я хочу сделать линию 1 px с левой стороны экрана до конца центрированного div. div сфокусирован на margin: auto;.

Это изображение показывает, как это должно выглядеть:

Answer 1

он повторно другое решение, и это кросс-браузер 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; 


} 

Answer 2

Вот пример использования 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

Browser support

Answer 3

Я не уверен, если это работает во всех браузерах, но я считаю, hr занимает все пространство, вы предоставляете его. Поэтому вы можете дать ему большой отрицательный левый край и поместить его в центрированный div. Вместо hr-элемента вы также можете использовать пустой div, который может быть или не быть проще в использовании. Вы можете установить стиль border-top этого div в более широкий диапазон пограничных типов (например, точка).

<div id="content"> 
    <hr id="bar" /> 
    <div id="realcontent">  
     Something here 
    </div> 
</div> 

С помощью CSS:

#content { 
    width: 400px; 
    margin: auto; 
    color: white; 
} 

#bar { 
    margin-left: -1000px; 
    margin-bottom: 5px; 
    background: blue; 
} 

#realcontent { 
    background-color: #000000; 
} 

Answer 4

Как об этом решении? без дополнительной разметки необходимо, кросс-браузер и не не зависит от ширины элемента

#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*/ 
} 

Demo fiddle