html - 纯css的书页索引效果

Question

我一直在尝试使用 css 完成以下操作，但无济于事。

这是我最接近这样的事情。

如你所见，我很接近，但没有雪茄。我需要的破折号(或最好是线条，但不会挑剔)并没有全部达到这个数字。我试着把它们全部拿过来并使用 overflow:hidden，但什么也没有。而且，这是一个响应式网站，因此它也必须尊重响应能力。

这是我的代码。谢谢!! :

HTML

      <div class="col-md-12 allocation">
            <div class="row">
                <div class="col-md-10 col-sm-10 col-xs-10">Equities</div>
                <div class="col-md-2 col-sm-2 col-xs-2">65%</div>
            </div>

            <div class="row">
                <div class="col-md-10 col-sm-10 col-xs-10">Domestic large capitalized firms</div>
                <div class="col-md-2 col-sm-2 col-xs-2">25%</div>
            </div>

            <div class="row">
                <div class="col-md-10 col-sm-10 col-xs-10">Domestic small capitalized firms</div>
                <div class="col-md-2 col-sm-2 col-xs-2">15%</div>
            </div>

            <div class="row">
                <div class="col-md-10 col-sm-10 col-xs-10">International developed markets</div>
                <div class="col-md-2 col-sm-2 col-xs-2">15%</div>
            </div>

            <div class="row">
                <div class="col-md-10 col-sm-10 col-xs-10">International emerging markets</div>
                <div class="col-md-2 col-sm-2 col-xs-2">10%</div>
            </div>

            <div class="row">
                <div class="col-md-10 col-sm-10 col-xs-10"><strong>Fixed Income</strong></div>
                <div class="col-md-2 col-sm-2 col-xs-2"><strong>15%</strong></div>
            </div>

            <div class="row">
                <div class="col-md-10 col-sm-10 col-xs-10"><strong>Real Estate</strong></div>
                <div class="col-md-2 col-sm-2 col-xs-2"><strong>20%</strong></div>
            </div>

            <div class="row">
                <div class="col-md-10 col-sm-10 col-xs-10">Core</div>
                <div class="col-md-2 col-sm-2 col-xs-2">12.5%</div>
            </div>

            <div class="row">
                <div class="col-md-10 col-sm-10 col-xs-10">Timber</div>
                <div class="col-md-2 col-sm-2 col-xs-2">7.5%</div>
            </div>
        </div>

CSS:

.allocation .row{
     margin:15px auto;
}
.allocation .row > div.col-md-10.col-sm-10.col-xs-10:after{
     content: "--------------------------------------------------- ";
}

Answer 1

如果要实现this , 你可以查看代码 here或在这里:

<div class="col-xs-12">
    <div class="row">
        <div>Equities</div>
        <div>65%</div>
    </div>

    <div class="row">
        <div>Domestic large capitalized firms</div>
        <div>25%</div>
    </div>

    <div class="row">
        <div>Domestic small capitalized firms</div>
        <div>15%</div>
    </div>

    <div class="row">
        <div>International developed markets</div>
        <div>15%</div>
    </div>

    <div class="row">
        <div>International emerging markets</div>
        <div>10%</div>
    </div>

    <div class="row">
        <div><strong>Fixed Income</strong></div>
        <div><strong>15%</strong></div>
    </div>

    <div class="row">
        <div><strong>Real Estate</strong></div>
        <div><strong>20%</strong></div>
    </div>

    <div class="row">
        <div>Core</div>
        <div>12.5%</div>
    </div>

    <div class="row">
        <div>Timber</div>
        <div>7.5%</div>
    </div>
</div>

使用此 CSS 代码:

.row {
    border-bottom: 1px dashed black;
    height: 15px;
    clear: right;
    margin-bottom: 16px;
}

.row div:first-of-type {
    float: left;
    background: #FFF;
    padding-right: 5px;

}

.row div:last-of-type {
    float: right;
    margin-top: 1px;
    background: #FFF;
    width: 50px;
    text-align: right;
}