使用 CSS 在两个宽度变化的 div 之间放置一条线

Question

我正在 CSS 布局，并且该设计在两个可以更改大小的元素之间使用了很多 | 。 IE

John     |      Logout

其中 John 位于相关 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>

编辑： 对于更多细节，因此该线将出现在两个元素的中间，其中一个（或两个元素都在更改大小）

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

就可以了