javascript - CSSを使用して、幅が変化する2つのdivの間に線を配置します

Question

私はレイアウトをCSSしているのですが、デザインでは2つの要素の間にサイズを変更できる多くの|が使用されています。IE

ジョン| ログアウト

ジョンは問題のdivの左側にあり、ログアウトは右側にあります。名前は動的で変更可能ですが、線がそれぞれの中央に配置されることを保証できる方法はありますか？おそらくCSSアプローチをやめて、ちょっとしたJavaScript関数を使うべきでしょうか？

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

編集：詳細については、2つの要素の中央に線が表示されるようにします。一方（または両方でサイズが変更されます）

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

境界線の右は、要素からの静的な距離であるため機能しません。つまり、含まれる文字数に応じて境界線の前の要素のパディングを変更する必要があります。

助けてくれてありがとう、デイブ

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

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

それはそれをするでしょう

Answer 3

ハックですが、動作します：

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

純粋なCSSで：

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

もちろん、これは古いブラウザーでは機能しない場合があります。

Answer 5

なぜ使用しないのですか：

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