Question

我正在构建一个布局，并且设计在两个可以改变大小的元素之间使用了很多。即。

约翰|注销

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/

（您不再需要<p>|</p>元素）

Answer 5

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

将会这样做

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

5 个答案: