Используя CSS, чтобы поместить линию между двумя div изменяющейся ширины

Question

Я создаю CSS-макет, и в дизайне используется множество | между двумя элементами, которые могут изменить размер. И.Е.

Джон | Выход

Где Джон находится слева от рассматриваемого div, а Logout справа. Имея динамическое и изменяемое имя, могу ли я гарантировать, что линия будет располагаться в середине каждого? Должен ли я выйти из подхода CSS и просто использовать небольшую функцию JavaScript?

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

Edit: Для большей детализации, линия появится в середине двух элементов, один (или оба меняют размер)

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

Правая граница не работает, так как это статическое расстояние от элемента, то есть отступы элемента до того, как необходимо изменить границу в зависимости от количества включенных символов.

Спасибо за вашу помощь всем, Дейв

Answer 1

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

, что сделает это

Answer 2

Взломать, но это работает:

.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/

(вам больше не нужен этот элемент <p>|</p>)

Answer 3

Почему бы не использовать только:

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

Answer 4

В чистом css:

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

Конечно, это может не работать в старых браузерах.

Answer 5

.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;
}