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

我需要将＆lt; span class =“icon”＆gt; |＆lt; / span＆gt;的位置放在＆lt; span class =“stageText”＆gt;的末尾和右边界之间父元素。这是一个证明情况的jsfiddle：http://jsfiddle.net/jralston/vc6pzawk/

非常感谢任何帮助或指示。

谢谢

约翰

Answer 1

我使用伪元素: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 2

我不确定在CSS中是否容易做到这一点但你可以通过JS＆amp; 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/

Answer 3

阅读评论以了解更改。这种技术的优点是你不需要使用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;
}

位置元素位于相邻元素和父元素结尾之间的中间位置

3 个答案: