書頁指數與純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

如果要實現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; 
} 

Answer 2

這有幾種解決方案...這裏是一個：

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

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