纯css的书页索引效果

pokxtpni 于 2023-02-20 发布在其他

关注(0)|答案(3)|浏览(128)

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

这是我最接近的一次了。

正如你所看到的，我很接近，但没有雪茄。我需要的破折号（或线最好，但不会挑剔）是不是都达到了数字。我试图把他们所有的方式和使用溢出：隐藏，但什么也没有。而且，这是一个响应网站，所以它必须尊重响应以及。
这是我的代码。谢谢！！：
超文本标记语言

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

css

来源：https://stackoverflow.com/questions/26724658/book-page-index-effect-with-pure-css

3条答案

按热度按时间

4si2a6ki1#

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

赞(0）回复(0）举报 2023-02-20

dldeef672#

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

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

赞(0）回复(0）举报 2023-02-20

xsuvu9jc3#

使用网格的简单且响应迅速的解决方案：

.index-item {
     display: grid;
     justify-content: space-between;
     align-items: baseline;
     grid-template-columns: auto 1fr auto;
     gap: .5rem;
     padding-block: .5rem;
}

.index-line {
     height: 3px;
     min-width: 15px;
     background: linear-gradient(90deg, #888 2.5%, #fff 2.5%, #fff 47.5%, #888 47.5%, #888 52.5%, #fff 52.5%, #fff 97.5%, #888 97.5%);
     background-size: 10px 10px;
     background-position: 50px 50px;
}

<div class="index-item">
    <div class="index-title">Page Title</div>
    <span class="index-line"></span>
    <div class="index-number">200</div>
</div>

<div class="index-item">
    <div class="index-title">Page Title (long title)</div>
    <span class="index-line"></span>
    <div class="index-number">230</div>
</div>

赞(0）回复(0）举报 2023-02-20

我来回答

纯css的书页索引效果

3条答案

使用网格的简单且响应迅速的解决方案：

相关问题

热门标签

最新问答