用纯CSS书页索引效果

Question

我一直试图用css完成以下工作但没有用。

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

如你所见，我很亲密，但没有雪茄。我需要短划线（或优选线，但不会挑剔）并不是全部达到数字。我尝试将它们一直带过来并使用溢出：隐藏，但没有。而且，这是一个响应式网站，因此它也必须尊重响应性。

这是我的代码。谢谢！！ ：

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

有几个解决方案......这里有一个：

＆＃13;

＆＃13;

.index-row{
    border-bottom: 1px dashed;  
    height:1.5em;
    clear:both;
 }

.index-row h2, .index-row span{
    padding:5px;
    margin:0;
    line-height:1.0em;
    background:white;
}

.index-row h2{
    float:left;
}

.index-row span{
    float:right;
}

＆＃13;

<div>
    
    <div class="index-row">
        <h2>titulo indice</h2>
        <span>45</span>
    </div>
     <div class="index-row">
        <h2>titulo indice</h2>
        <span>45</span>
    </div>
     <div class="index-row">
        <h2>titulo indice</h2>
        <span>45</span>
    </div>
    
    
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您想要实现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;
}