1

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

约翰 | 登出

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

右边框不起作用，因为它是与元素的静态距离，即边框之前元素上的填充需要根据包含的字符数进行更改。

谢谢大家的帮助，戴夫

4

5 回答 5

0 
.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;
}
于 2011-10-19T12:56:51.223 回答
0

为什么不只使用：

.top .name { border-right: 1px solid black }
于 2011-10-19T13:10:35.337 回答
0 
.top p{float:right}
.top p.name{float:left}

那会做到的

于 2011-10-19T15:09:09.100 回答
0

在纯 CSS 中：

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

当然，这可能不适用于旧浏览器。

于 2011-10-19T13:34:50.487 回答
0

一个黑客，但它有效：

.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>元素了）

于 2011-10-19T13:45:44.933 回答