位置单元位于相邻单元与父单元末端之间的中间位置单元

Question

我有以下标记。它是动态交付的，我对它所能做的更改是有限的。

标记：

<div id="container">
    <div class="stage">
        <span class="stageText">Hello World</span>
        <span class="icon">|</span>
    </div>

    <div class="stage">
        <span class="stageText">Hello</span>
        <span class="icon">|</span>
    </div>

    <div class="stage">
        <span class="stageText">Hi There</span>
        <span class="icon">|</span>
    </div>
</div>

CSS (不完全按照要求/描述)

#container {
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    display:table;
    width:445px;
}

.stage {
    display:table-cell;
    width:33.33333%;
}

.icon {
    width:3px;
    margin-left:auto;
    margin-right:auto;
}

我需要在父元素的末尾和右边边界之间的中间位置，下面是一个演示这种情况的工具：http://jsfiddle.net/jralston/vc6pzawk/。

任何帮助或指点都非常感谢。

谢谢

约翰

Answer 1

请阅读有关更改的注释。这种技术的优点是您不需要使用javascript或更改html，只需使用css。

JSFiddle

#container {
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    display:table;
    width:445px;
}

.stage {
    display:inline-block;/*instead of table-cell*/
    text-align: center;/*centers text*/
    float: left;/*float */
    width:33.33333%;
}

.icon {
    float: right;/*put icons left or right from text*/
    width:3px;
}

Answer 2

我使用伪元素:after创建这个解决方案。

​

#container {
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    display:table;
    width:445px;
}

.stage {
    display:table-cell;
    width:33.33333%;
}

.stage:after {
    content: "|";
    position: relative;
    left: 25%;
}

<div id="container">
    <div class="stage">
        <span class="stageText">Hello World</span>
    </div>
    
    <div class="stage">
        <span class="stageText">Hello</span>
    </div>
    
    <div class="stage">
        <span class="stageText">Hi There</span>
    </div>
</div>

​

Answer 3

我不确定在CSS中是否容易做到这一点，但您可以通过JS &jQuery轻松地做到这一点：

$('.icon').each(function () {
    var $el = $(this),
        containerWidth = $el.parent().width(),
        contentWidth = $el.prev().width();

    $el.css('left', (contentWidth) + ((containerWidth - contentWidth) / 2));
});

http://jsfiddle.net/vc6pzawk/3/