CSS를 사용하여 두 개의 폭이 변경되는 두 div 사이에 선을 배치합니다.

Question

저는 CSSing 레이아웃을 사용하고 있으며 크기를 변경할 수있는 두 요소 사이에 디자인을 많이 사용했습니다. I.E.

존             |             로그 아웃 존이 문제의 DIV의 왼쪽에 있고, 로그 아웃 오른쪽에

. 이름이 역동적이고 변경 가능하기 때문에 각 행의 중간에 행이 위치 할 것이라고 보장 할 수있는 방법이 있습니까? 아마 CSS 접근법을 종료하고 약간의 JavaScript 함수를 사용해야할까요? 좀 더 세부 사항에 대한 , 선이 두 가지 요소 가운데 하나에 나타납니다 그래서 (또는 둘 다 변화 크기) 테두리 권리로

p  |  logout 
john  |  logout 
david  |  logout 
jonathonan | logout 
reallylongname | logout 

작동하지 않습니다 편집

<div class="top"> 
    <p class="name">Welcome Jeremy Louelen-Boxen</p> 
    <p>|</p> 
    <p class="logout"><a href="#">Logout</a></p> 
</div> 

이것은 요소로부터의 정적 거리, 즉 포함 된 문자의 수에 따라 경계가 변경되어야하기 전에 요소의 패딩입니다. 당신의 도움이 모든

감사합니다, 데이브

Answer 1

.top p{ 
    margin:0 10px 0 10px; 
    padding:0 10px 0 10px; 
    border-left:1px solid #000; 
} 

.top p:first-child{ 
    border-left: none transparent; 
} 

Answer 2

돈`t 사용 만하는 이유 :

.top .name { border-right: 1px solid black } 

Answer 3

순수 CSS에서이 : 물론

.top p:after { 
    content: ' | '; 
} 
.top p:last-child:after { 
    content: ''; 
} 

,이 작동하지 않을 수 있습니다 오래된 브라우저에서.

Answer 4

해킹,하지만 작동합니다

는

.top { 
    overflow: auto; 
} 

.top > :first-child { 
    float: left; 
    width: 50%; 
    border-right: 1px solid gray; 
} 

.top > :last-child { 
    float: right; 
    width: 49%; 
    text-align: right; 
} 

는 라이브 데모 :http://jsfiddle.net/DrJyd/2/

Answer 5

.top p{float:right} 
.top p.name{float:left} 

그것을 할 것이다 (당신은 더 이상 <p>|</p> 요소 것을 필요로하지 않는다)